vue项目element-ui表格
一、安装依赖
cnpm i file-saver xlsx -S
二、引入依赖
在需要导出Excel的页面（如user.vue）引入file-saver和xlsx：
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
三、提供用于导出的表格
除了用于展示的表格以外，还要准备一个用于下载的表格（非必须，但是推荐，后面注意事项中会提到这样做的理由）该表格一般不可见，即display: none;，并且为其设置一个id，如id="export-table1"，作用是告诉程序将来要导出哪个表格的数据，对应下文exportExcel方法中的document.querySelector('#export-table1')。
...
导出Excel
四、定义导出方法
exportExcel () {
// 导出的内容只做解析，不进行格式转换
let xlsxParam = { raw: true }
let wb = null
let tableName = ''
let randomString = this.randomString(6)
wb = XLSX.utils.table_to_book(
document.querySelector('#export-table1'),
xlsxParam
)
// 这里的randomString非必须，只是生成一串随机码
// 便于下载多个文件而不重名
tableName = `用户表-${randomString}.xlsx`
/* get binary string as output */
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
// eslint-disable-next-line no-undef
FileSaver.saveAs(new Blob([wbout], {
type: 'application/octet-stream'
}), tableName)
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
this.$message.success('导出成功')
return wbout
}
代码中的tableName变量就是将来下载的Excel的文件名，为了防止多次下载而重名，所以后面加了一段随机码，下面附上生成随机码的方法：
// 生成len位随机码
randomString (len) {
len = len || 32
// 屏蔽了容易让人混淆的字符，比如数字1和字母l,，数字0和字母o……
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = chars.length
var str = ''
for (let i = 0; i < len; i++) {
str += chars.charAt(Math.floor(Math.random() * maxPos))
}
return str
}
五、注意事项
用于导出的表格有多少条数据，导出的Excel就有多少条。如果希望导出所有数据，那么该表格就不能设置分页（假设设置每页20条，导出的Excel也只有20条），所以建议额外准备一个隐藏表格专门用于导出Excel；
点击导出按钮执行exportExcel方法，如果发现导出的Excel数据不全或者只有表头，可能是因为点击过快造成数据还未渲染完成，可以在点击事件中设置一定时间的延迟（比如1000毫秒），以确保数据成功渲染；
隐藏表格应保持尽可能的简洁，删掉所有的fixed（设置了列冻结的表格导出后可能会生成多份）、不必要的样式、排序、分组等属性，只确保基本数据能渲染成功即可。
发表评论 (审核通过后显示评论)：