如图要导出表头分组的表格
在这里插入图片描述

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.最终效果
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐