前端js导出CSV,Excel格式文件


!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;idata.len >h;i++){
                var temp = [];
                for(var j=0;jtitleForKey.len >h;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
  ahref="javascript:;"导出/a
/body
/html


第二种方法通过ActiveXObject("Excel.Application")实现,这种方法只支持ie浏览器

html页面代码如下


!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleIE导出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.len >h; i++) {
            for (j = 0; j  Lenr[i].len >h; 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:;"src="/upload/attach/blank.gif"  data-echo="http://www.mamicode.com/img/fz.gif" a< ="复制代码">

第三种方法也是目前项目中正在使用的

通过使用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" /
titleIE导出CSV/title
script src="/upload/attach/blank.gif"  data-echo="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:;"src="/upload/attach/blank.gif"  data-echo="http://www.mamicode.com/img/fz.gif" a< ="复制代码">

前端js导出CSV,Excel格式文件

原文地址:http://www.cnblogs.com/zhj-Acmen/p/7299032.html


最新回复(0)
/jishu_2FSFjOPYG_2BqYu7rE_2FcXvtdm_2FCcMAOSA2_2FtRp_2BcOqgczQ_3D4719011
8 简首页