Pure front-end export excel, table data rendering is repeated
Business needs
The page has multiple pieces of data in the table table, and there is no pagination. The demand hopes that the interface will not be called, and the pure front-end will generate an excel file to realize the export function.
renderings
1. Install dependencies (xlsx and file-saver)
npm install --save xlsx file-saver
2. Html code block
In order to let everyone see clearly, I also released all my table header structure (mainly add id to el-table, easy to find)
<!-- 主要给导出的表格添加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 code block
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. The export is complete (but you will find that the data in the exported excel table will appear twice)
The reason is: when using the fixed attribute in el-table, two tabledoms will be created, and the interactive effect can be realized by hiding one and displaying the other. When the entire el-table is exported, the tables in the two divs will be exported, resulting in data duplication.
5. Modify the js logic to judge and delete the fixed table
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. When exporting again at this moment, the effect picture at the beginning of the article will appear, which perfectly realizes the pure front-end export to excel.
Limitation: Only the data of the current page can be exported, and the page-by-page export cannot be distinguished. So if you want to achieve perfect export, let the background make interface calls.