纯前端导出excel,表格数据渲染重复
业务需求
页面有table表格里的多条数据,并且没有分页。需求希望不调用接口,纯前端生成excel文件实现导出功能。
效果图
1、安装依赖(xlsx 和 file-saver)
npm install --save xlsx file-saver
2、Html代码块
为了让大家看清楚,我把自己的表头结构也全部放出来(主要给el-table添加id,方便找到)
<!-- 主要给导出的表格添加id,方便找到-->
<el-table id="out-table" height="450" :data="tableData">
<el-table-column width="120" prop="zhonglei" fixed></el-table-column>
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column
v-for="item in columns"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:min-width="item.minWidth"
></el-table-column>
<!-- 这块为多级表头的写法,具体可以查看element ui文档 -->
<el-table-column label="自营网络平台渠道" >
<el-table-column
v-for="item in columns1"
:key="item.prop"
:label="item.label"
:prop="item.prop"
>
</el-table-column>
</el-table-column>
<el-table-column label="第三方网络平台渠道">
<el-table-column
v-for="item in columns1"
:key="item.prop"
:label="item.label"
:prop="item.prop"
>
</el-table-column>
</el-table-column>
</el-table>
3、js代码块
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
exportExcel() {
//找到要导出对应的table表格
var exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table'))
var exportTableOut = XLSX.write(exportTable, { bookType: 'xlsx', bookSST: true, type: 'array' })
//sheetjs.xlsx为导出表格的标题名称
try {
FileSaver.saveAs(new Blob([exportTableOut], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, exportTableOut) }
return exportTableOut
},
4、导出完成(但是会发现导出的excel表里数据会重复出现两份)
造成原因是:使用el-table里的fixed属性时会创建了两个tabledom,通过一个隐藏一个显示来实现交互效果。当导出整个el-table 就会将两个div内的table都导出,导致数据重复。
5、修改js逻辑,判断删除fixed表格
exportExcel() {
//不加判断table表格导出会有两份数据,是因为fixed造成的,所以要筛选去重
// 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去,
var fix = document.querySelector('.el-table__fixed');
var exportTable;
if (fix) {
exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix));
document.querySelector('#out-table').appendChild(fix);
} else {
exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table'));
}
var exportTableOut = XLSX.write(exportTable, { bookType: 'xlsx', bookSST: true, type: 'array' })
//sheetjs.xlsx为导出表格的标题名称
try {
FileSaver.saveAs(new Blob([exportTableOut], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, exportTableOut) }
return exportTableOut
},
6、此刻再次导出时会出现文章开篇时的效果图,完美实现纯前端导出excel.
局限性:只能导出当前页的数据,无法区分分页导出。所以要想实现完美的导出,还是让后台做接口调用吧。