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

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

RT

乍一看，这个如何下手那

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

      //导出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
发现支持合并单元格 ，那就好办了

RT
开工，找到 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;
}

RT

ok 合并单元格完事

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

RT

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

当看到

 data.unshift(th);

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

输出ws

RT

查看 ws就是最终处理过的要导出的excel数据，那就拿这块数据做文章了。
没有数据的地方就传空，不就得了。

  data.unshift(th);
  data.unshift(['商品','品牌','爱亲贝贝','','','','是否按来源显示','是','','','','数据显示方式','全部显示']);
  data.unshift(['分销机构','全部','','','','','起止日期','2017-11-07至2017-11-27','','','','汇总方式','按品类汇总']);
  data.unshift(['','','','','','','进销存汇总表']);

  data.push(['制表人','系统管理员','','','','','','','','','','制表时间','2018-08-08 15:24:38']);

导出的是没有任何样式的

RT

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