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