Vue项目中导出当前el-table数据为Excel表格
安装依赖
npm i xlsx@0.14.1 file-saver@2.0.1 --save
进行配置
- main.js 中全局引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
Vue.prototype.$FileSaver = FileSaver
Vue.prototype.$XLSX = XLSX
- 局部引入-- 哪里不会点哪里
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
使用方式
// 导出 --采用剧本引入的方式,看个人喜好了
_export() {
const fix = document.querySelector('.el-table__fixed')
let wb
if (fix) {
// 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
wb = XLSX.utils.table_to_book(
document.querySelector('#table').removeChild(fix)
)
document.querySelector('#table').appendChild(fix)
} else {
wb = XLSX.utils.table_to_book(document.querySelector('#table'))
}
const 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
}