網頁前端導出CSV，Excel格式文件

時間 2019-11-16

標籤網頁前端導出 csv excel 格式文件欄目 HTML 简体版

原文原文鏈接

經過本身實際測試有如下幾種方法javascript

方法一經過a標籤實現，把要導出的數據用「\n」和「,」拼接成一個字符串，而後把字符串放到href中，這種方法只支持chrome，firefox等非ie瀏覽器html

html頁面代碼以下java

<!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瀏覽器git

html頁面代碼以下github

<!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>

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

經過使用FileSave.js實現FileSave.js插件https://github.com/eligrey/FileSaver.js/瀏覽器

html頁面代碼以下app

<!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>