前端导出excel

一、通过传入tableId导出excel

寻找到了一个用法简单而且输出的excel表格也好看的excel插件，这是用法链接 http://www.jq22.com/jquery-info19771 导出的excel如下

在ie9下会报blob不存在，可以通过下载jquery.base64.js https://github.com/yckart/jquery.base64.js 解决，然后在报错的地方中插入代码即可

1 2	if (!window.btoa) window.btoa = $.base64.btoa if (!window.atob) window.atob = $.base64.atob

但是在ie9下还是有其他兼容问题，比如promise等（排除一个兼容又有一个，在ie9还是导不出来），最后采用ie9独有的ActiveXObject来导出，而其他浏览器则还是采用ExcelGen插件导出

// 导出excel
function exportExcel(tableId, fileName) {
    // ie导出excel需用activex
    if (window.ActiveXObject) {
        var curTbl = document.getElementById(tableId);
        var oXL = new ActiveXObject("Excel.Application");

        //创建AX对象excel
        var oWB = oXL.Workbooks.Add();
        //获取workbook对象
        var xlsheet = oWB.Worksheets(1);
        //激活当前sheet 
        var sel = document.body.createTextRange();
        sel.moveToElementText(curTbl);
        //把表格中的内容移到TextRange中
        sel.select;
        //全选TextRange中内容
        sel.execCommand("Copy");
        //复制TextRange中内容  
        xlsheet.Paste();
        //粘贴到活动的EXCEL中
        oXL.Visible = true;
        //设置excel可见属性

        try {
            var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
        } catch (e) {
            print("Nested catch caught " + e);
        } finally {
            oWB.SaveAs(fname);

            oWB.Close(savechanges = false);
            //xls.visible = false;
            oXL.Quit();
            oXL = null;
            //结束excel进程，退出完成
            //window.setInterval("Cleanup();",1);
            idTmr = window.setInterval("Cleanup();", 1);

        }

    } else {
        excel = new ExcelGen({
            "src_id": tableId,
            "show_header": true,
            "file_name": fileName
        })
        excel.generate();

    }
}

最后虽然已经兼容ie9了但是缺点是得用户允许开启activex控件而且输出的样式也不够美观。
另外这个方法有个弊端，就是所要导出的table必须已经在dom中渲染出来，因此也只能导出一页的表格数据。自己想了个不太优雅但能完美解决但的方法是点击导出按钮时在html中插入一个隐藏的不做分页的表格，然后根据这个tableid来导出（点击导出再渲染表格能提高一点性能），数据量过大时就性能会差。

二、通过传入json数据导出excel

通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，代码如下：


<html>
<head>
  <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
  <button onclick='tableToExcel()'>导出</button>
</head>
<body>
  <script>

    function tableToExcel(){
      //要导出的json数据
      var jsonData = [
        {
          name:'路人甲',
          phone:'123456789',
          email:'000@123456.com'
        },
        {
          name:'炮灰乙',
          phone:'123456789',
          email:'000@123456.com'
        },
        {
          name:'土匪丙',
          phone:'123456789',
          email:'000@123456.com'
        },
        {
          name:'流氓丁',
          phone:'123456789',
          email:'000@123456.com'
        },
      ]
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = `姓名,电话,邮箱\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for(let i = 0 ; i < jsonData.length ; i++ ){
        for(let item in jsonData[i]){
            str+=`${jsonData[i][item] + '\t'},`;     
        }
        str+='\n';
      }
      //encodeURIComponent解决中文乱码
      let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      //通过创建a标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download =  "json数据表.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

</script>
</body>
</html>