Excel 文件导出 js-xlsx合并单元格的实现

1. 
   export default {
2. data() {
3. return {
4. tableData: [],
5. colData: [],
6. originData: [{"skuId":"00001","skuName":"nameSku0001","w00001":{"warehouseId":"w00001","warehouseName":"仓库1","quantity":50,"lockQuantity":5,"availableQuantity":45},"w00002":{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},"w00003":{"warehouseId":"w00003","warehouseName":"仓库3","quantity":40,"lockQuantity":1,"availableQuantity":39}},{"skuId":"00002","skuName":"nameSku0002","warehouseItem":[{"warehouseId":"w00001","warehouseName":"仓库1","quantity":100,"lockQuantity":5,"availableQuantity":95},{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},{"warehouseId":"w00003","warehouseName":"仓库3","quantity":5,"lockQuantity":5,"availableQuantity":0}],"w00001":{"warehouseId":"w00001","warehouseName":"仓库1","quantity":100,"lockQuantity":5,"availableQuantity":95},"w00002":{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},"w00003":{"warehouseId":"w00003","warehouseName":"仓库3","quantity":5,"lockQuantity":5,"availableQuantity":0}},{"skuId":"00003","skuName":"nameSku0003","warehouseItem":[{"warehouseId":"w00001","warehouseName":"仓库2","quantity":100,"lockQuantity":5,"availableQuantity":95},{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},{"warehouseId":"w00003","warehouseName":"仓库3","quantity":50,"lockQuantity":5,"availableQuantity":45}],"w00001":{"warehouseId":"w00001","warehouseName":"仓库2","quantity":100,"lockQuantity":5,"availableQuantity":95},"w00002":{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},"w00003":{"warehouseId":"w00003","warehouseName":"仓库3","quantity":50,"lockQuantity":5,"availableQuantity":45}}]
7. }
8. }
9. methods: {
10. initData() {
11. this.tableData = this.originData.map(res => {
12. res.warehouseItem.forEach(item => {
13. res[item.warehouseId] = item
14. })
15. return res
16. })
17. this.originData[0].warehouseItem.forEach((res) => {
18. this.colData.push({
19. dataItem: res.warehouseId,
20. dataName: res.warehouseName
21. })
22. })
23. },
24. exportList() {
25. const wscols = [
26. { wpx: 220 } // 第一列宽度设置单位px
27. ]
28. /**
29. * 合并单元格元素(decode_range方法解析数据格式)
30. {
31. s: { //s start 开始
32. c: 1,//cols 开始列
33. r: 0 //rows 开始行
34. },
35. e: {//e end 结束
36. c: 4,//cols 结束列
37. r: 0 //rows 结束行
38. }
39. }
40. */
41. const wsMerge = [XLSX.utils.decode_range(\'A1:A2\')]
42. /** 头部-行列信息*/
43. const header1 = this.colData.map(res => res.dataName).concat(\'合计\')
44.  
45. header1.map((res, idx, array) => {
46. const hdMergeObj = {
47. s: { r: 0 },
48. e: { r: 0 }
49. }
50. if ((idx + 2) % 1 === 0) {
51. array.splice(3 * idx + 1, 0, \'\', \'\')
52. hdMergeObj[\'s\'][\'c\'] = 3 * idx + 1
53. hdMergeObj[\'e\'][\'c\'] = hdMergeObj[\'s\'][\'c\'] + 2
54. wsMerge.push(hdMergeObj)
55. }
56. return res
57. })
58. const header2 = this.colData.map(() => \'库存数量\').concat(\'库存数量\')
59. header2.map((res, idx, array) => {
60. if ((idx + 2) % 1 === 0) {
61. array.splice(3 * idx + 1, 0, \'锁定数量\', \'可用数量\')
62. }
63. return res
64. })
65. const ws = XLSX.utils.aoa_to_sheet([
66. [\'商品信息\'].concat(header1),
67. [\'\'].concat(header2)
68. ])
69. // console.log(\'header1\', [\'商品信息\'].concat(header1))
70. // console.log(header2)
71. /** 商品信息-行列信息*/
72. const skuInfo = this.tableData.map(res => res.skuId + \'\r\n\' + res.skuName)
73. XLSX.utils.sheet_add_aoa(ws, skuInfo.map(res => [res]), { origin: \'A3\' })
74. /** 仓库-行列信息（库存数量，锁定数量，可用数量）*/
75. const unAllowed = [\'skuId\', \'skuName\', \'warehouseItem\']
76. const sheetData = this.tableData.map((data) => {
77. const filterItem = Object.assign({}, data)
78. Object.keys(filterItem)
79. .filter(key => unAllowed.includes(key))
80. .forEach(key => delete filterItem[key])
81. // 重构完数据
82. let warehouseDatas = []
83. Object.values(filterItem).forEach(res => {
84. warehouseDatas = warehouseDatas.concat([res.quantity]).concat([res.lockQuantity]).concat([res.availableQuantity])
85. return warehouseDatas
86. })
87. return warehouseDatas
88. })
89. // console.log(\'sheetData\', sheetData)
90. XLSX.utils.sheet_add_aoa(ws, sheetData, { origin: { r: 2, c: 1 }})
91. /** 合计-行列信息*/
92. const totalData = this.tableData.map(row => {
93. const totlal_quantity = Object.values(row.warehouseItem).map(res => res.quantity).reduce((accumulator, currentValue) => accumulator + currentValue)
94. const totlal_lockQuantity = Object.values(row.warehouseItem).map(res => res.lockQuantity).reduce((accumulator, currentValue) => accumulator + currentValue)
95. const totlal_availableQuantity = Object.values(row.warehouseItem).map(res => res.availableQuantity).reduce((accumulator, currentValue) => accumulator + currentValue)
96. return [totlal_quantity, totlal_lockQuantity, totlal_availableQuantity]
97. })
98. // console.log(\'total\', totalData, this.colData.length * 3 + 1)
99. XLSX.utils.sheet_add_aoa(ws, totalData, { origin: { r: 2, c: this.colData.length * 3 + 1 }})
100. // 导出
101. const wb = XLSX.utils.book_new()
102. XLSX.utils.book_append_sheet(wb, ws, \'Sheet1\')
103. ws[\'!cols\'] = wscols
104. // wsMerge.push(XLSX.utils.decode_range(\'B1:D1\')) // 测试数据 仓库1模拟数据
105. ws[\'!merges\'] = wsMerge
106. console.log(wsMerge)
107. XLSX.writeFile(wb, \'库存报表按SKU.xlsx\')
108. }
109. }
110. }

导出效果如下图：

转载于:https://my.oschina.net/u/3734107/blog/3072645