【react】导出 xlsx
/**
exportExcel方法需要传入的参数
1、headers --- 表头
2、data --- 表格数据
3、name --- 导出表格的名称,默认为导出表格数据
4、arr --- 数组,每个单元格的大小,每个对象的key只必须是 wpx
注意,导出表格的格式只能为xlsx,别的格式可能没数据/不支持
*/
import * as XLSX from 'xlsx';
import { message } from 'antd';
let handleExcel = {
// 导出 Excel
exportExcel(headers, data, name = '导出表格数据', arr, format = 'xlsx') {
let fileName = name + '.' + format;
let headerData = []
let headerDataLen = headers&&headers.length > 0 ? headers.length : 0
for(var i = 0; i < headerDataLen; i++) {
headerData.push({wpx: 100})
}
// 单元格的大小
let wpxArr = arr ? arr : headerData;
const _headers = headers
.map((item, i) => Object.assign({}, { dataIndex: item.dataIndex, title: item.title, position: i > 25 ? ('A' + String.fromCharCode(65 + i - 26) + 1) : String.fromCharCode(65 + i) + 1 }))
.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { dataIndex: next.dataIndex, v: next.title } }), {});
const _data = data
.map((item, i) => headers.map((dataIndex, j) => Object.assign({}, { content: item[dataIndex.dataIndex], position: j > 25 ? ('A' + String.fromCharCode(65 + j - 26) + (i + 2)) : String.fromCharCode(65 + j) + (i + 2) })))
// 对刚才的结果进行降维处理(二维数组变成一维数组)
.reduce((prev, next) => prev.concat(next))
// 转换成 worksheet 需要的结构
.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});
// 合并 headers 和 data const output = Object.assign({}, _headers, _data); // 获取所有单元格的位置 const outputPos = Object.keys(output); // 计算出范围 ,["A1",..., "H2"] const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; // 构建 workbook 对象
const wb = {
SheetNames: ['mySheet'],
Sheets: {
mySheet: Object.assign(
{},
output,
{
'!ref': ref.toUpperCase(),//解决Aa2 --> AA2ref.toUpperCase(),//解决Aa2 --> AA2
'!cols': wpxArr,
},
),
},
};
XLSX.writeFile(wb, fileName, (err) => {
if (err) {
message.error(err)
}
});
// return new Promise((resolve, reject) => {
// // 导出 Excel
// XLSX.writeFile(wb, fileName, (err) => {
// if (err) {
// reject(err)
// } else {
// resolve()
// }
// });
// })
}
}
module.exports = { handleExcel };
主要是遵循excel的表格式,动态创建每行的内容。
需要注意:

这个是因为没有遵循excel的表头命名格式 需要全部为大写字母
解决:toUpperCase
组件引用
import { handleExcel } from 'tools/handleExcel.js';
入参示例:

handleExcel.exportExcel(
this.state.rightColumns, this.state.dataSource, 'xxx表格')
'!ref': ref.toUpperCase(),//解决Aa2 --> AA2
Sheets: {
mySheet: Object.assign(
{},
output,
{
'!ref': ref.toUpperCase(),//解决Aa2 --> AA2
'!cols': wpxArr,
},
),
},
官方文档:https://www.npmjs.com/package/xlsx

浙公网安备 33010602011771号