前端将el-table中的数据导出成excel文件

1. 下载FileSaver插件 链接

2. 在app.js中写入

   import saveAs from 'file-saver';
   Vue.use(saveAs)
   

3. 在需要导出的页面写入

   <el-table
      id="rebateSetTable"
       :data="tableDataSlackDetail"
       style="width: 100%;">
       <el-pagination
               background
                @size-change="handleSizeChangeDetail"
                @current-change="handleCurrentChangeDetail"
                :current-page="currentPageDetail"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pagesizeDetail"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableDataSlackDetail.length"
                style="margin: 20px 0;">
        </el-pagination>
   </el-table>
   <el-button @click="exportExcel">导出文件</el-button>
   

   //这里需要注意：当直接导出时，默认导出的数据为当前表格显示的，非全部内容，
   //所以需要手动修改当前页面显示条数，等导出完，再还原。
   exportExcel () {
        let oldPage = this.pagesizeDetail
        this.pagesizeDetail = 100000;
        this.$nextTick(() => {
            let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'));
            /* get binary string as output */
            let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
            try {
                saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '冗余资源详情表.xlsx');
            } catch (e)
            {
                if (typeof console !== 'undefined')
                    console.log(e, wbout)
            }
   
            this.pagesizeDetail =oldPage;
            return wbout
        })
    },