vue中前端导出excel表,使用Export2Excel导出多级表头的表格

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

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

  • 5
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在Vue项目前端导出具有多级表头表格Excel文件,你可以使用`xlsx`库结合一些操作来实现。下面是一个示例代码: 首先,确保已经安装了`xlsx`库。在项目的根目录下运行以下命令: ``` npm install xlsx ``` 然后,在需要导出Excel文件的组件,可以按照以下方式编写代码: ```vue <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> <script> import XLSX from 'xlsx'; export default { methods: { exportExcel() { const headers = [ { text: '姓名', rowspan: 2 }, { text: '信息', colspan: 2 }, { text: '科目', rowspan: 2 }, { text: '成绩', colspan: 3 } ]; const data = [ ['张三', '学生', '数学', '语文', '英语'], [null, null, 90, 80, 85] ]; const mergeCells = [ { s: { r: 0, c: 1 }, e: { r: 0, c: 2 } }, { s: { r: 0, c: 3 }, e: { r: 0, c: 5 } } ]; const ws = XLSX.utils.aoa_to_sheet([headers, ...data]); ws['!merges'] = mergeCells; const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, 'data.xlsx'); } } } </script> ``` 在上述代码,我们定义了要导出表格表头`headers`和数据`data`,以及合并单元格的信息`mergeCells`。在`exportExcel`方法,我们首先将表头和数据合并为一个二维数组,然后使用`XLSX.utils.aoa_to_sheet`方法将其转换为工作对象`ws`。接着,我们设置合并单元格的信息,并将其赋值给工作对象的`!merges`属性。最后,创建工作簿对象`wb`,将工作对象添加到工作簿,并使用`XLSX.writeFile`方法将工作簿保存为Excel文件。 在用户点击"导出Excel"按钮时,将触发`exportExcel`方法,从而导出具有多级表头表格Excel文件。 请注意,这种方式只能在现代浏览器使用,并且导出Excel文件将保存在用户的本地文件系统
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值