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

谁践踏了优雅 2021-07-25 17:02 757阅读 0赞

1.  下载`FileSaver`插件 [链接][Link 1]
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
             })
         },

[Link 1]: https://github.com/eligrey/FileSaver.js/