之前不太明白实现使用vue 实现 Excel 导出的功能和逻辑 之前也写过一个博客关于vue表格导出成Excel的功能 不过那个有点复杂了 今天给大家分享一个简单的写法。 话不多说,上代码
// 安装两个关于Excel 的插件
npm install file-saver -S
npm install xlsx -S
// 在需要用到的页面中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
// 在methods 中封装一个导出Excel的函数
// 通过按钮点击调用方法
// document.querySelector('#out-table') 需要在table 中定义一个id = out-table
xportExcel () {
/* generate workbook object from table */
let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
/* get binary string as output */
let 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
}
}