前端导出excel

EchoROne

发布于 2022-08-15 08:27:36

2.7K0

发布于 2022-08-15 08:27:36

文章被收录于专栏：玩转大前端

公司做项目需要前端导出 excel，因此查了许多，总结出前端导出 excel 的三种方法（如不全面，请更正）

通过传入 tableId 导出excel，此时 table 已生成

2. 通过传入 json 数据导出excel

3. 通过后端导出excel

一、通过传入tableId导出excel

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

![image.png](https://upload-images.jianshu.io/upload_images/4573742-338d1c40b7f8753e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

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>

这个方法同样在ie9上兼容性差，亲测导出的excel会带上meta、head等标签信息