zoukankan      html  css  js  c++  java
  • 【转载】JS导出CSV文件

    转自:http://www.cnblogs.com/dengnan/p/3990211.html

    通过自己实际测试有以下几种方法

    方法一通过a标签实现,把要导出的数据用“ ”和“,”拼接成一个字符串,然后把字符串放到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(",")+"
    ");
                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(",")+"
    ");
             }
             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+"标题,标题,标题
    1,2,3
    4,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>
    复制代码
  • 相关阅读:
    项目架构开发:数据访问层之Cache
    微信公众号平台接口开发:菜单管理
    【软件工程】第0次个人作业
    OO第四次博客作业
    OO第三次博客作业
    OO第二次博客作业
    Java学习笔记
    SQLInjection 靶场配置
    OO第一次博客作业
    面向对象先修:Java入门
  • 原文地址:https://www.cnblogs.com/YangtzeYu/p/7773784.html
Copyright © 2011-2022 走看看