项目需要输出这种类型的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进行导出的，暂时没发现更好的方式。
网友评论