纯前端导出elementUI的表格

步骤一 安装

npm install xlsx
npm install file-saver --save

步骤二 给table一个id

 //给table一个id id="report-detail-table"
 <el-table
  id="report-detail-table"
  stripe
  border
>

步骤三 引入插件

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

步骤四 下载函数

downloadExcel() {
    const element = document.getElementById("report-detail-table")
    // raw: true展示原始数据. 防止number类型的id,等长数字到excel表格里展示变成科学计数法.
    let et = XLSX.utils.table_to_book(element, { raw: true });
    let etout = XLSX.write(et, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        FileSaver.saveAs(
            new Blob([etout], {
                    type: "application/octet-stream",
            }),
            `${this.detail.id}-${this.detail.name}.xlsx`
        ); //导出的文件名
    } catch (e) {
        console.log(e, etout);
    }
    return etout;
},