vue中xlsx导出多个sheet页（多个表格多个sheet页）_vue 导出多个sheet页并加入数据-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41542329/article/details/130966149

文章展示了如何使用npm库file-saver和xlsx来创建并导出包含多个工作表的Excel文件。通过table_to_sheet方法将HTML表格转换为工作表，然后添加到工作簿中，最后使用FileSaver保存为.xlsx文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖

npm install file-saver xlsx -S

然后在需要的页面中引入依赖包

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

方法一：

// 导出
handle_export() {
    var xlsxParam = {
        raw: true
    }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
    let workbook = XLSX.utils.book_new();
    let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
    // 这里可以添加多个sheet页
    XLSX.utils.book_append_sheet(workbook, ws1, 'table1');
    let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#table2'), xlsxParam);
    XLSX.utils.book_append_sheet(workbook, ws2, 'table2');
    let ws3 = XLSX.utils.table_to_sheet(document.querySelector('#table3'), xlsxParam);
    XLSX.utils.book_append_sheet(workbook, ws3, 'table3');
    let wbout = XLSX.write(workbook, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    });
    try {
        FileSaver.saveAs(
        new Blob([wbout], {
            type: 'application/octet-stream;charset=utf-8"'
        }), '多sheet演示.xlsx');
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbOut);
    }
    return wbout;
}

方法二：

mydncxd(){
        let table = document.getElementById("mydncxd");
        let table1 = document.getElementById("bgxxkx");
        var xlsxParam = { raw: true } //设置excel为文本格式解决数值导出后自动转换为科学计数法
        let worksheet = XLSX.utils.table_to_sheet(table,xlsxParam);
        let worksheet1 = XLSX.utils.table_to_sheet(table1,xlsxParam);
        let workbook = XLSX.utils.book_new();
        let wscols = [    // table每列不同宽度px
          { wch: 20 },
          { wch: 50 },
          { wch: 20 },
          { wch: 50 },
        ];
        // workbook.SheetNames[0]获取到到是文件里的到第一个表格
        worksheet["!cols"] = wscols;
        let wsrows = [{ hpx: 20 }];  // 每行固定高度px
        for (let i = 0; i <= this.total; i++) {   // total  列表条数
          wsrows.push({ hpx: 20 });
        }
        worksheet["!rows"] = wsrows;
        let wscols1 = [    // table1每列不同宽度px
          { wch: 20 },
          { wch: 20 },
          { wch: 50 },
          { wch: 50 },
        ];
        worksheet1["!cols"] = wscols1;
        worksheet1["!rows"] = wsrows;
        // 这里可以添加多个sheet页
        XLSX.utils.book_append_sheet(workbook, worksheet, '企业基本信息');
        XLSX.utils.book_append_sheet(workbook, worksheet1, '变更信息');
        try {
          XLSX.writeFile(workbook, '变更通知书.xlsx');  //  time_date 所选日期
        } catch (e) {
          console.log(e, workbook);
        }
      },

效果图：