excel导出_学习笔记—— 前端导出excel

这两天工作上来了两个需求，一个是打印的功能，一个是导出的功能。功能其实之前已经做出来了，打印我用的是printjs的插件，excel用的是Export2Excel.js，但是产品要求打印页面和导出的excel头部和底部要加上自定义的一些东西（比如图片里面标题下面的收款人、打印时间，最下面的制表、审核、审核时间等），下面是我做出来之后的效果图

打印功能，我是把人家的源文件下载下来，把源码改了改（之前的源码不支持底部内容以及有一些小bug），重新打包发到自己的npm上，直接使用即可。

导出excel功能，就不用再麻烦的发布npm，直接在项目里面找到Export2Excel.js修改即可，由于水平太菜，参考了下面这位大佬的文章，怕以后找不到所以把文章内容复制了过来，并且做了转载声明，以下是大佬的原文~

---

项目需要输出这种类型的excel表格

乍一看，这个如何下手那

原来项目的代码翻出来，原来实现的方式

      //导出Excel 表格
      export2Excel() {
        require.ensure([], () => {
          const {export_json_to_excel} = require('../../assets/js/Export2Excel');
          const tHeader = ['日期' , '含税销售金额', '含税销售成本', '含税毛利额', '无税销售金额', '无税销售成本', '无税毛利额', '毛利率'];
          const filterVal = ['bizDate', 'saleTaxAmount', 'costTaxAmount', 'profitTaxAmount', 'saleUnTaxAmount', 'costUnTaxAmount', 'profitUnTaxAmount', 'profitRateStr'];
          const list = this.rtableData;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, 'xxx概况统计');
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      exportExcel() {
          this.export2Excel()
      },

就是先定义表头，定义data数据，实现导出。

这种如何处理那，还是看文档吧， SheetJS/js-xlsx
发现支持合并单元格 ，那就好办了

开工，找到 Export2Excel.js 然后修改如下

export function export_json_to_excel(th, jsonData, defaultTitle) {
  ......
  ws["!merges"] = [
    {  //合并第四行（C4）第三列到第五列
      s: {//s为开始
        c: 2,//开始列
        r: 3//开始取值范围
      },
      e: {//e结束
        c: 4,//结束列
        r: 3//结束范围
      }
    }, {  //合并A1A2单元格
      s: {//s为开始
        c: 0,//开始列
        r: 0//开始取值范围
      },
      e: {//e结束
        c: 0,//结束列
        r: 1//结束范围
      }
    },
]
  console.log(ws)
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;
}
 

ok 合并单元格完事

问题又来了，怎么输出这种样式的header

有点坑爹啊。难道也要合并单元格吗。
合并之后怎么处理cell 的样式那，看到还有个xlsx-style的库，但是试了试，自定义修改样式已经不能用了，部分功能已经不再支持开源。

当看到

 data.unshift(th);

灵机一动，那就按照这种修改输出数据。

输出ws

查看 ws就是最终处理过的要导出的excel数据，那就拿这块数据做文章了。

没有数据的地方就传空，不就得了。

导出的是没有任何样式的

就先这样吧，翻看了其他的导出，有后台拼接导出的，前台根据table的html重新拼接成完整的html进行导出的，暂时没发现更好的方式。

作者：小学生的博客

链接： 前端导出excel☞js-xlsx实现合并单元格