0%

Vue中实现el-table导出xlsx文件下载

Vue中实现el-table导出xlsx文件下载

安装 xlsx 组件

1
pnpm install --save xlsx

实现代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
<el-table id="download" ...>
</el-table>
</template>
<script>
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
export default {
methods: {
/** 导出按钮操作 */
handleExport() {
let xlsxParam = {raw:true}
var wb = XLSX.utils.table_to_book(
document.querySelector("#download"),
xlsxParam
);
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
`调查问卷-${this.parseTime(new Date(), '{y}_{m}_{d}_{h}:{i}')}.xlsx`
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
}
</script>