el-table导出含有多张sheet的excel

最新推荐文章于 2024-08-09 14:24:59 发布

King汀

最新推荐文章于 2024-08-09 14:24:59 发布

阅读量664

点赞数

文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/qq_28691187/article/details/111577884

版权

el-table导出含有多张sheet的excel

注：该项目是在html页面中引入vue.js 来使用vue的

封装好的表格组件：https://blog.csdn.net/qq_28691187/article/details/111476394

表格：（含有固定列，合并单元格样式）

<datareport-component ref="report-table1" tableid="out_table1" :title="title1" :reportlistdata="reportListData"
    :columns="columns" :items="items" :fontweight="fontWeight" :fontindent="fontIndent">
</datareport-component>
<datareport-component ref="report-table2" tableid="out_table2" :title="title2" :reportlistdata="reportListData2"
    :columns="columns2" :items="items2" :fontweight="fontWeight" :fontindent="fontIndent">
</datareport-component>

目标：将表格批量导出到一个excel中

步骤：
（1）新建文件夹 → 打开powershell → 运行 npm install --save xlsx file-saver
（2）引入（或者可以将如下路径的js文件放入到项目中，注意修改路径）

<script src="./node_modules/file-saver/src/FileSaver.js"></script>
<script src="./node_modules/xlsx/dist/xlsx.full.min.js"></script>

（3）代码

 // 导出多张sheet表格
exportExcel(excelName) {
    const $e = this.$refs['report-table1'].$el;
    const $e2 = this.$refs['report-table2'].$el;
    let $table = $e.querySelector('.el-table__fixed'); 
    let $table2 = $e2.querySelector('.el-table__fixed');
    // 表格是否含有固定列（含有固定列的表格，导出时会有重复的数据）
    if (!$table) {
        $table = $e;
    }
    if (!$table2) {
        $table2 = $e2;
    }
    //创建一个空的工作区间
    const wb = XLSX.utils.book_new();
    //创建sheet
    const sheet1 = XLSX.utils.table_to_sheet($table, { raw: true });
    const sheet2 = XLSX.utils.table_to_sheet($table2, { raw: true });
    //追加sheet
    XLSX.utils.book_append_sheet(wb, sheet1, this.title1);
    XLSX.utils.book_append_sheet(wb, sheet2, this.title2);
    console.log(wb);
    //组装
    const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    })
    try {
        //保存
        saveAs(
            new Blob([wbout], {
                type: 'application/octet-stream'
            }),
            `${excelName}.xlsx`,
        )
    } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
    }
}

（4）绑定导出按钮的点击方法

 <el-button id="download" @click="exportToExcel">导出</el-button>

exportToExcel() {
	var now = new Date();
	var date = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	var fileName = 'exportExcel';
	var exportFileName = fileName + date;
	this.exportExcel(exportFileName);
}