拟定表格为
ID | 名字 | 性别 |
---|
//表头对照
const header = {
id: 'ID',
name: '名字',
sex: '性别' // 1 -男 2 - 女
};
//性别 key value
const sexOption = [
{ value: '1', label: '男' },
{ value: '2', label: '女' }
];
安装 XLSX 插件
npm install xlsx
yarn add xlsx
pnpm install xlsx
在页面中引用
import * as XLSX from 'xlsx';
导出方法
const exportXlsx = () => {
const data = [
{ id: '1', name: '张三', sex: '1' },
{ id: '2', name: '李四', sex: '2' },
];
const d = [];
//整合数据
data.map((item) => {
const i= {};
for (let key in item) {
const val =
key === 'sex'
? sexOption.find((sex) => sex.value === item[key]).label
: item[key];
i[header[key]] = val;
}
d.push(i);
});
const worksheet = XLSX.utils.json_to_sheet(d); //将数据转换为工作表
const workbook = XLSX.utils.book_new(); //创建一个新的工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); //将工作表添加到工作簿
XLSX.writeFile(workbook, '人员信息.xlsx'); //保存工作簿为文件
};
导入方法
//value => key
const getKeyByValue = (obj, value) => {
var keys = Object.keys(obj);
var index = keys.find(function (key) {
return obj[key] === value;
});
return index !== undefined ? index : value; //若未找到对应的key,则返回 value
};
//导入
const importXlsx = (file: any) => {
//创建一个FileReader实例
const fileReader = new FileReader();
//读取文件
fileReader.readAsBinaryString(file);
//读取完成
fileReader.onload = () => {
//读取数据
const workbook = XLSX.read(fileReader.result, { type: 'binary' });
//获取第一个sheet
const sheet = workbook.Sheets[workbook.SheetNames[0]];
//将sheet转成json
const jsonData: any[] = XLSX.utils.sheet_to_json(sheet, { header: 1 }) || [];
//将表头转成对象
const header: any = {};
//遍历表头
jsonData[0].map((item: string, index: number) => {
header[index] = getKeyByValue(XlsxHeader, item);
});
//数据去除表头
const data = jsonData.filter((item: any[], index: number) => index > 0);
const mergeData = []; //合并数据数组
//合并数据
data.map((item, index) => {
mergeData.push({});
item.map((i, idx) => {
mergeData[index][header[idx]] = i;
});
});
//插入数据
mergeData.map((item) => {
for (let key in item) {
if (key === 'sex') item[key] = sexOption.find((sex) => sex.label === item[key]).value;
}
});
console.log('导入的数据', mergeData);
};
};