React ant table 用 XLSX 导出excel文件
近期做了一个react ant design 的table转换成excel 的功能 总结下
首先我们会自己定义下 antdesign 的table的columns其中有可能有多语言或者是render方法的转换显示（比如说加特殊符号或者属性的code转换成对应的显示名称）都可以应用上
比如
const columns = [{ title: 'Qty',
dataIndex: 'quantity',
key: 'quantity'
}, {
title: intl.get("totaldiscount").d('Total Discount Price'),
dataIndex: 'price',
key: 'price',
render: text => {
var msg = text
switch (text) {
case "":
''
break;
default:
msg => "￥" + msg
break;
}
return msg
}
}]
const data=[{qty:1,price；10}，{qty:2,price；20}]
exportExcel([
{
blocks: [
{ headers:columns, data:data },
], sheetName: "销售数据sheet"
},
], "统计报表")
添加一个文件写exportExcel的function
支持同时生成多个sheet
1 import XLSX from 'xlsx';2 import { message } from 'antd';
3 import { isBlank } from './PubUtils'
4
5 //exportExcel sheets=[blocks:[{headers:[],data:[]}],sheetName:""}]
6 // fileName =""
7 function exportExcel(sheets, fileName = 'dowloadFile') {
8 if (sheets.length <= 0) {
9 message.error("no data download")
10 return
11 }
12 13 const sheetsArr = sheets.map(sheet => {
14 let Count = 1
15 let colsWidth = []
16 let sheetOutPut = {}
17 18 sheet.blocks.map(
19 block => {
20 if (block.headers.length <= 0) {
21 message.error("no data download")
22 return
23 }
24 const blockHeaders = block.headers.filter(item => !item.excelHidden)
25 const _headers = blockHeaders
26 .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: getPostition(i) + Count }))
27 .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});
28 console.log("_headers==", _headers)
29 Count++
30 let dataArr = [], _data = {}
31 //有数据时进行处理
32 if (block.data && block.data.length > 0) {
33 dataArr = block.data
34 .map((item, i) => blockHeaders.map((head, j) => {
35 let content = ""
36 let position = getPostition(j) + (i + Count)
37 if (head.excelRender) {
38 content = head.excelRender(item[head.dataIndex], item, i)
39 } else if (head.render) {
40 content = head.render(item[head.dataIndex], item, i)
41 } else {
42 content = item[head.dataIndex]
43 }
44 content = isBlank(content) ? "" : content
45 // 转换成 worksheet 需要的结构
46 _data[position] = { v: content }
47 return { content, position }
48 }
49 ))
50 }
51 colsWidth = getColWidth(colsWidth, block.headers, dataArr)
52 Count += dataArr.length + 1
53 // 合并 headers 和 data
54 sheetOutPut = Object.assign({}, sheetOutPut, _headers, _data);
55 }
56 )
57 if (colsWidth.length <= 0) {
58 message.error("no data download")
59 return Object.assign(
60 { sheetName: sheet.sheetName },
61 )
62 }
63 // 计算出范围 ,["A1",..., "H2"]
64 const ref = `A1:${getPostition(colsWidth.length - 1) + '' + Count}`;
65 return Object.assign(
66 { sheetName: sheet.sheetName },
67 sheetOutPut,
68 {
69 '!ref': ref,
70 '!cols': colsWidth,
71 },
72 )
73 })
74 const sheetNames = sheetsArr.map(sheet => sheet.sheetName)
75 const wbSheets = sheetsArr.reduce((prev, next) =>
76 Object.assign({}, prev, { [next.sheetName]: next }), {})
77 // 构建 workbook 对象
78 const wb = {
79 SheetNames: sheetNames,
80 Sheets: wbSheets,
81 };
82 // 导出 Excel
83 XLSX.writeFile(wb, fileName + ".xlsx");
84 }
85
86 function getPostition(index) {
87 let result = String.fromCharCode(65 + parseInt(index % 26))
88 let value = index / 26
89 while (value >= 1) {
90 value = value - 1
91 result = String.fromCharCode(65 + parseInt(value % 26)) + result
92 value = parseInt(value / 26)
93 }
94 return result
95 }
96 function getColWidth(preColWidth, headers, dataArr) {
97 const allWch = [headers,].concat(dataArr).map(item => item.map(val => {
98 let value = val.title || val.content || ""
99 let length = 10
100 /*先判断是否为null/undefined*/
101 if (value) {
102 /*再判断是否为中文*/
103 if (value.toString().charCodeAt(0) > 255) {
104 length = value.toString().length * 2
105 } else {
106 length = value.toString().length
107 }
108 }
109 return {
110 'wch': length < 40 ? length : 40
111 };
112 }))
113 if (preColWidth.length < allWch[0].length) {
114 preColWidth = preColWidth.concat(allWch[0].slice(preColWidth.length))
115 }
116 let colWidth = preColWidth
117 for (let i = 0; i < allWch.length; i++) {
118 for (let j = 0; j < allWch[i].length; j++) {
119 if (colWidth[j]['wch'] < allWch[i][j]['wch']) {
120 colWidth[j]['wch'] = allWch[i][j]['wch'];
121 }
122 }
123 }
124 return colWidth
125 }
126 export default exportExcel;
以上是 React ant table 用 XLSX 导出excel文件 的全部内容， 来源链接： utcz.com/z/382634.html
