vue中前端导出excel表,使用Export2Excel导出多级表头的表格
使用Export2Excel导出多级表头的表格如图要导出表头分组的表格1.为了不影响其他表格的导出,我复制了一份Export2Excel文件进行修改只需修改方法为export_json_to_excel下的代码/*export_json_to_excel文件*/export function export_json_to_excel({multiHeader = [],// 第一行表头multiH
·
如图要导出表头分组的表格
1.为了不影响其他表格的导出,我复制了一份Export2Excel文件进行修改
只需修改方法为export_json_to_excel下的代码
/*export_json_to_excel文件*/
export function export_json_to_excel({
multiHeader = [], // 第一行表头
multiHeader2 = [], // 第二行表头
// header, // 第三行表头
data,
filename, //文件名
merges = [], // 合并
bookType = 'xlsx'
} = {}) {
/* original data */
filename = filename || '列表';
data = [...data];
// data.unshift(header);
var ws_name = "SheetJS";
data.unshift(multiHeader)
data.unshift(multiHeader2)
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
if (merges.length > 0) {
if (!ws['!merges']) ws['!merges'] = [];
merges.forEach(item => {
ws['!merges'].push(XLSX.utils.decode_range(item))
})
}
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`)
2.在vue文件中使用
需要注意的是写表头名数组时当一级表头下包含3个子标题时,只要两个占位符,字段名写最下级的就行
// 写在需要执行的方法下面
import("../js/Export2Excel2").then((excel) => {
const multiHeader =[
"日期",
"渠道",
"收入",
"",
"",
"DAU",
"",
"",
]; // 导出的表头名
const multiHeader2 = [
"",
"",
"全部",
"新用户",
"老用户",
"DAU",
"新安装",
"去新dau"
]; // 导出的表头名
const filterVal = [
"day",
"channelId",
"amtPayerAllDevice",
"amtPayerNewDevice",
"amtPayerOldDevice",
"dau",
"numRoleTotal",
"noNewDau"
]; // 导出的表头字段名
const merges = [
"A1:A2",
"B1:B2",
"C1:E1",
"F1:H1"
]; // 根据Excel确定要合并的单元格
const data = this.formatJson(filterVal, this.sumTable.tableDatas);
let filterName = "渠道详情数据";
excel.export_json_to_excel({
multiHeader, //这里是第一行的表头
multiHeader2, // 这里是第二行的表头
// header: tHeader, //这里应该是算第三行的表头
data,
merges,
filename: filterName,
});
});
3.最终效果
更多推荐
已为社区贡献1条内容
所有评论(0)