如题,虽然一直知道可以SheetJS 导出table表格数据,可以领导对我的要求是最好纯前端导出数据。所以这事就开始了。
先拿出文档地址:
https://github.com/rockboom/SheetJS-docs-zh-CN#%E8%A7%A3%E6%9E%90%E5%92%8C%E7%BC%96%E5%86%99%E7%A4%BA%E4%BE%8B
//
我本地其实使用的是带修改样式版的xlsx-js-style 这样导出的样式会更加好看,也更符合要求,不过这都是看自己需求来的,有需求的可以一起了解一下这个。
回归整正题
里面主要使用到的是:
XLSX.utils.json_to_sheet(data, { header: header })
XLSX.utils.book_append_sheet(workbook, ws, '表格名')
以下是思路:
1.通过递归的方式,获取到数据完整的数组。(so easy)
2.定义表格头head数组。let header =['序号','姓名','性别']
3.遍历整理数组,使完整数据和head数组行程对应关系。
let data = this.dataList.map((item, i) => {
return {
'序号': i + 1,
'姓名': item.name,
'性别': item.sex
}})
这个整理完的data就是我要使用的数组了。
4.把JS对象数组转换为工作表。 let ws = XLSX.utils.json_to_sheet(data, { header: header })
5.(可忽略 如果没有装style的可以不用) ws = this.worksheetStyle(ws)
等于给我的数据加上ws样式。
6.创建表格 XLSX.utils.book_append_sheet(workbook, ws, '表格名')
7.导出表格XLSX.writeFile(workbook, `表格名.xlsx`)
以下是我开发的时候遇到要注意点的
1.数据不要污染到table表格显示的数据
2.在拼凑表格的时候,数据一定要加判断,是否长度和返回的total一致。
3.小心写死循环(写给我自己哈哈哈哈)
如果有所帮助,或者内容有所偏颇,求留言巴拉巴拉。求点赞鼓励一下下原创于米卡/简书/请勿搬运哦感谢