此种方式适合于直接导出,不对样式进行更改。
使用这两个插件,简单的实现如下表格:
效果:
1. 使用npm 下载插件:
npm i xlsx
npm i file-saver
2. 在组件中导入:
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
XLSX 这样导入之后,在使用时我报了如下错误:
Cannot read properties of undefined (reading 'utils')"
所以将 XLSX 的导入方式改为:
import * as XLSX from 'xlsx'
3. 准备工作完毕,接下来就是导出的代码了
exportTable(){
var xlsxParam = { raw: true } // 导出的内容只做解析,不进行格式转换
var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam) // #exportTab 是要导出的表格的id
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出的表的名称.xlsx')
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
}
到此就可以完美的导出表格了,不过导出的表格不太好看,第一次接触这类东西,如有错误,请留言批评改正。