element UI的table组件表格导出、下载注意点

1、安装依赖

npm install --save file-saver xlsx

2、页面标签展示

<el-table 
    id="tableId"
    :data="detailTableData" 
    :header-cell-style="{ background:'#F5F7FA', color:'#666' }"
    :height="tableHeight"
    style="width: 100%"
    highlight-current-row
    stripe 
    border>
    <el-table-column prop="datetime" label="日期" align="center"></el-table-column>
    <el-table-column prop="stationIdC" label="编号" align="center"></el-table-column>
    <el-table-column prop="stationName" label="站名" align="center"></el-table-column>
    <el-table-column prop="val" :label="数据值" align="center"></el-table-column>
</el-table>
<div class="btn" @click="exportDownloadClick">导出下载</div>

3、导入依赖

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

注意点：在这里必须写成 import * as XLSX from ‘xlsx’; 不能写成 import XLSX from ‘xlsx’; 不然会在导出、下载的方法中出现以下报错：

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘utils’)”

4、导出下载方法

exportDownloadClick(){
    let dom = document.querySelector('#tableId');
    let xlsxName = "站点同期对比表格.xlsx";
    let xlsxParam = { raw: true }; //导出的内容只做解析，不进行格式转换
    let wb = XLSX.utils.table_to_book( dom, xlsxParam );
    let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
    });
    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }),xlsxName);
    }catch(e){
        if (typeof console !== 'undefined') {
            this.$message.error("下载失败");
        }
    }
    return wbout;
},