1.安装相关依赖
npm install --save xlsx file-saver
2.导入相关插件
在组建头部导入相关插件
const FileSaver = require("file-saver")
const XLSX = require("xlsx")
3.调用相关的方法
var wb = XLSX.utils.table_to_book(document.querySelector("#tableBox"))
var wbout = XLSX.write(wb, { bookType: ‘xlsx‘, bookSST: true, type: ‘array‘ })
try {
FileSaver.saveAs(new Blob([wbout], { type: ‘application/octet-stream‘ }), ‘sheetjs.xlsx‘)
} catch (e) { if (typeof console !== ‘undefined‘) console.log(e, wbout) }
4.分页的数据导出
4.1点击下载之后先设置,一个参数ableExportOut为true, 保存好当前页面的数据, 赋值新的数据
4.2单数据赋值成功后,会执行updated这个生命周, 在里面判断ableExportOut是否为true, 然后执行下载表格相关的函数
4.3执行完下载表格之后, 吧就数据赋值回去, 把ableExportOut设为false
updated() {
if(this.ableExportOut){
this.exportOut()
}
},
methods: {
// 执行下载
activeExportOut(){
this.ableExportOut = true //设置可以下载
this.oldtableData = this.tableData //保存起就数据
this.tableData = test //赋值新数据
},
//下载表格
exportOut(){
var wb = XLSX.utils.table_to_book(document.querySelector("#tableBox"))
var wbout = XLSX.write(wb, { bookType: ‘xlsx‘, bookSST: true, type: ‘array‘ })
try {
FileSaver.saveAs(new Blob([wbout], { type: ‘application/octet-stream‘ }), ‘sheetjs.xlsx‘)
} catch (e) { if (typeof console !== ‘undefined‘) console.log(e, wbout) }
this.ableExportOut = false //设置不可下载
this.tableData = this.oldtableData //回复原来说的数据
return wbout
}
}
vue element 导出 excel表格 + 分页的数据
原文：https://www.cnblogs.com/lianxisheng/p/10802383.html