当前位置:网站首页>antd组件upload上传xlsx文件,并读取文件内容
antd组件upload上传xlsx文件,并读取文件内容
2022-07-02 22:09:00 【不会秃头】
xlsx包
这个包是个npm包,这里使用的版本为:
“xlsx”: “^0.14.5”
使用方式
首先,在文件中引入:
import XLSX from 'xlsx';
然后在upload组件的beforeUpload中使用:
beforeUpload(files) {
const readFile = file => {
const [fileReader, data1] = [new FileReader(), {
}];
let [binaryData, workbook] = [null, null];
fileReader.onload = e => {
binaryData = e.target.result;
workbook = XLSX.read(binaryData, {
type: 'binary' });
Object.keys(workbook.Sheets).forEach(sheet => {
data1[sheet] = XLSX.utils
.sheet_to_json(workbook.Sheets[sheet], {
header: 1 })
.slice(1);
});
workbook.SheetNames.forEach(sheetName => {
const dataSheet = data1[sheetName];
for (let index = 0; index < dataSheet.length; index += 1) {
const row = dataSheet[index];
const item = {
name: row[0] ? row[0] : null,
snCode: row[1] ? row[1] : null,
macAddress: row[2] ? row[2] : null,
ipAddress: row[3] ? row[3] : null,
number: Number(row[4] ? row[4] : null),
podium: (row[5] ? row[5] : null) === '是' ? true : false,
devices: [
{
ipAddress: row[6] ? row[6] : null,
location: 'top1'
},
{
ipAddress: row[7] ? row[7] : null,
location: 'side1'
},
{
ipAddress: row[8] ? row[8] : null,
location: 'front1'
},
{
ipAddress: row[9] ? row[9] : null,
location: 'front2'
},
]
};
fileData.push(item);
}
});
// fileData即为表格数据
if (fileData.length > 0) {
that.setState({
tables: fileData,
});
message.success('导入成功!');
}else {
message.error('导入失败!')
}
};
fileReader.readAsBinaryString(file);
};
readFile(uploadFile);
边栏推荐
- MySQL查询附近的数据.并按距离进行排序.
- 数学建模——图与网络模型及方法(一)
- The threshold value of fusing proportion cannot be changed with sentinel, and setting the slow call proportion has no effect
- [羊城杯2020]easyphp
- JS syntax ES6, ES7, es8, es9, ES10, es11, ES12 new features (Abstract)
- 电商系统微服务架构
- NC24325 [USACO 2012 Mar S]Flowerpot
- P7072 [CSP-J2020] 直播获奖
- Introduction and response to high concurrency
- Qt QScrollArea
猜你喜欢
随机推荐
杰理之样机在多次触摸后会触发关机【篇】
The kth largest element in the [leetcode] array [215]
地方经销商玩转社区团购模式,百万运营分享
数据分析学习记录(二)---响应曲面法及Design-Expert的简单使用
[leetcode] most elements [169]
Objects and object variables
uniapp微信登录返显用户名和头像
Methods of adding styles to native JS
JS获取display为none的隐藏元素的宽度和高度的解决方案
[leetcode] number of palindromes [9]
Share 10 JS closure interview questions (diagrams), come in and see how many you can answer correctly
世界环境日 | 周大福用心服务推动减碳环保
SimpleITK使用——4. 奇怪的問題
[Luogu p1541] tortoise chess [DP]
[羊城杯2020]easyphp
[leetcode] there are duplicate elements [217]
Rails 3 activerecord: sort by association count - rails 3 activerecord: order by count on Association
[ODX studio edit PDX] -0.1- how to quickly view the differences in supported diagnostic information between variant variants (service, sub function...)
Server response status code
Film and television excerpts









