前端js匯出CSV，Excel格式檔案

最後更新：2017-08-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：中文 key one ica alt href 技術 tar export

通過自己實際測試有以下幾種方法

方法一通過a標籤實現，把要匯出的資料用“\n”和“,”拼接成一個字串，然後把字串放到href中，這種方法只支援chrome，firefox等非ie瀏覽器

html頁面代碼如下

<!DOCTYPE html><html>    <head>        <meta http-equiv="content-type" content="text/html; charset=utf-8">        <meta name="author" content="oscar999">        <title>匯出CSV檔案</title>        <script>        function exportCsv(obj){            //title ["","",""]            var title = obj.title;            //titleForKey ["","",""]            var titleForKey = obj.titleForKey;            var data = obj.data;            var str = [];            str.push(obj.title.join(",")+"\n");            for(var i=0;i<data.length;i++){                var temp = [];                for(var j=0;j<titleForKey.length;j++){                    temp.push(data[i][titleForKey[j]]);             }             str.push(temp.join(",")+"\n");         }         var uri = ‘data:text/csv;charset=utf-8,‘ + encodeURIComponent(str.join(""));           var downloadLink = document.createElement("a");         downloadLink.href = uri;         downloadLink.download = "export.csv";          document.body.appendChild(downloadLink);         downloadLink.click();         document.body.removeChild(downloadLink);       }      window.onload = function(){          document.getElementById("test").onclick = function(){              exportCsv({                  title:["第一列","第二列"],                  titleForKey:["num1","num2"],                  data:[                     {                      num1:"123",                      num2:"fff"                     },{                      num1:"123",                      num2:"fff"                     },{                      num1:"123",                      num2:"fff"                     }]                  });         }      }      </script>       </head><body>  <a id="test" href="javascript:;">匯出</a></body></html>

第二種方法通過ActiveXObject("Excel.Application")實現，這種方法只支援ie瀏覽器

html頁面代碼如下

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IE匯出CSV</title><script>window.onload = function(){    function exportCsv(){        //建立AX對象excel        var oXL = new ActiveXObject("Excel.Application");         //擷取workbook對象         var oWB = oXL.Workbooks.Add();        //啟用當前sheet        var oSheet = oWB.ActiveSheet;        var Lenr = [["標題一","標題二","標題三"],["4","5","6"],["1","2","3"]];        for (i = 0; i < Lenr.length; i++) {            for (j = 0; j < Lenr[i].length; j++) {                oSheet.Cells(i + 1, j + 1).value = Lenr[i][j];             }        }        //設定excel可見屬性         oXL.Visible = true;    }    document.getElementById("J_export").onclick = function(){        exportCsv();          }}</script></head><body>   <a href="javascript:;" id="J_export">匯出</a></body></html>

第三種方法也是目前項目中正在使用的

通過使用FileSave.js實現FileSave.js外掛程式https://github.com/eligrey/FileSaver.js/

html頁面代碼如下

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IE匯出CSV</title><script src="FileSaver.js"></script><script>window.onload = function(){    function exportCsv2(){        //Excel開啟後中文亂碼添加如下字串解決        var exportContent = "\uFEFF";        var blob = new Blob([exportContent+"標題,標題,標題\n1,2,3\n4,5,6"],{type: "text/plain;charset=utf-8"});        saveAs(blob, "hello world.csv");    }    document.getElementById("J_export").onclick = function(){        exportCsv2();    }}</script></head><body>    <a href="javascript:;" id="J_export">匯出</a></body></html>

前端js匯出CSV，Excel格式檔案

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More