目前我们做项目遇到的导出有两种方式，一是前端vue+XLSX 导出excel，一是vue+后端POI 导出excel
- 前端导出excel 相对来说简单一点，XLSX是前端 npm 包，但是如果数据量大的话，会卡顿，处理时间慢；当数据量多的时候 使用后端导出会好一点
- 后端导出excel 相对来说麻烦一点，但是时间短、速度快；具体操作都放在后端，也节省了前端的操作。用户效果好。
因为我是做前端的，下面我主要介绍前端vue+XLSX 导出excel。
一、安装 xlsx、 file-saver
npm install xlsx file-saver --save
二、引入
main.js
import * as xlsx from 'xlsx'
Vue.prototype.$xlsx = xlsx
vue页面
import { saveAs } from 'file-saver'
三、XLSX 两个方法
XLSX 方法一和XLSX 方法二都是使用的XLSX模块的方法，只是获取数据的方式和导出excel的方式有点不一样。- 相比之下，还是
XLSX 方法一会好一点，可以自定义导出的字段。
1、XLSX 方法一
exportExcel() {
const tableData = [
['序号', '名称', '用户', '手机号'] // 导出表头
] // 表格表头
this.tableArr.forEach((item, index) => {
// tableArr是查询到的表格数据
let rowData = []
// 导出内容的字段
rowData = [index + 1, item.name, item.user, item.phone]
tableData.push(rowData)
})
const workSheet = this.$xlsx.utils.aoa_to_sheet(tableData)
const bookNew = this.$xlsx.utils.book_new()
this.$xlsx.utils.book_append_sheet(bookNew, workSheet, 'xxx') // 工作簿名称
const name = 'xxx.xlsx'
this.$xlsx.writeFile(bookNew, name) // 保存的文件名
}
如果需要导出选中的数据，则将tableArr换成选中的表格数据即可
2、XLSX 方法二
导出当前页
注意：当表格使用了浮动节点（即左固定列或右固定列）时，需要删除该浮动节点，不然会有两个相同的列
像这样：
exportExcel() {
// 导出内容只做解析，不进行格式转换
const xlsxParam = { raw: true }
// 拷贝一份节点并删除表格左浮动节点
const table = document.querySelector('#onlineTable').cloneNode(true)
const content = table.querySelector('.ant-table-content')
content.removeChild(table.querySelector('.ant-table-fixed-left'))
// 转换数据格式
const wb = this.$xlsx.utils.table_to_book(table, xlsxParam)
const wbout = this.$xlsx.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'xxx.xlsx')
} catch (e) {
if (console !== 'undefined') console.log(e, wbout)
}
return wbout
},
