前端实现excel 转成数据
前端实现上传文件,解析文件成数据发送给后端
html
//文件上传
<Button type="link" style={{ position: 'relative' }}>
<input
type="file"
id="file"
style={{ position: 'absolute', left: 0, top: 0, opacity: 0, zIndex: 99 }}
onChange={handleImport}
accept=".xlsx, .xls"
/>
<label htmlFor="file" style={{ position: 'absolute', left: 0, top: 0, zIndex: 1 }}>批量导入</label>
</Button>
const handleImport = file => {
const { files } = file.target;
// 通过FileReader对象读取文件
const fileReader = new FileReader();
fileReader.onload = event => {
console.log(event, 'event');
// try {
const { result } = event.target;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, { type: 'binary' });
let data = []; // 存储获取到的数据
// 遍历每张工作表进行读取(这里默认只读取第一张表)
for (const sheet in workbook.Sheets) {
if (Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)) {
//这是关键的一步,hasOwnPropert要从Object的原型中调用
// 利用 sheet_to_json 方法将 excel 转成 json 数据
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一张表,就取消注释这行
}
}
getExcelData(data);
// message.success('导入完成');
// } catch (e) {
// // 这里可以抛出文件类型错误不正确的相关提示
// message.error('文件类型不正确');
// return;
// }
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
};
//数据处理
const getExcelData = data => {
const excelRow = {
姓名: 'realName',
工号: 'empNo',
};
let dataSources = [];
dataSources = data.map(item => {
let obj = {};
Object.keys(item).map(v => {
if (excelRow[v]) {
obj[excelRow[v]] = item[v];
}
});
return obj;
});
};