xlsx结合FileSaver将elementUI的el-table所展示内容导出excel

1. 安装

npm install xlsx file-saver

2. 引入

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

3. 给el-table绑定数据，且绑定id，来获取DOM

    <el-table
        id="tableId"
        v-loading="loading"
        :showPagination="false" 
        :data="pageData" 
        highlight-current-row
        :max-height="tableHeight"
        border
    >
        <el-table-column 
            v-for="(item, index) in columnsowner" 
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
        >
        </el-table-column>
    </el-table>

4. 导出方法

    exportExcel() {        
        var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
        let fix = document.querySelector(".el-table__fixed");
        let wb;
        //判断有无fixed定位，如果有的话，先去掉，后面再加上，不然导出的数据会重复
        if (fix) {
            // 创建一个工作薄
            wb = XLSX.utils.table_to_book(
                document.querySelector("#tableId").removeChild(fix), xlsxParam
            );
            document.querySelector("#tableId").appendChild(fix);
        } else {
            wb = XLSX.utils.table_to_book(document.querySelector("#tableId"), xlsxParam);
        }
        
        // XLSX从数据生成电子表格字节（文件）
        let wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
        });

        // 使用FileSaver将字节文件保存本地
        try {
            FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "木片检验结果.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        
        return wbout;
    }