-
下载
FileSaver
插件 链接 -
在app.js中写入
import saveAs from 'file-saver'; Vue.use(saveAs)
-
在需要导出的页面写入
<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 }) },
前端将el-table中的数据导出成excel文件
最新推荐文章于 2024-09-13 15:29:25 发布