react 怎么获取表格_React读取Excel——js-xlsx 插件的使用

本文介绍了如何在React应用中使用js-xlsx插件读取Excel文件,并解决在Webpack配置中遇到的'cptable'模块缺失问题。通过添加特定的externals配置,成功读取Excel并将其转换为JSON数据。最后展示了经过样式美化和提示信息优化的完整代码示例。
摘要由CSDN通过智能技术生成

onImportExcel = file =>{//获取上传的文件对象

const { files } =file.target;//通过FileReader对象读取文件

const fileReader = newFileReader();

fileReader.οnlοad= event =>{try{

const { result }=event.target;//以二进制流方式读取得到整份excel表格对象

const workbook = XLSX.read(result, { type: 'binary'});

let data= []; //存储获取到的数据

//遍历每张工作表进行读取(这里默认只读取第一张表)

for (const sheet inworkbook.Sheets) {if(workbook.Sheets.hasOwnProperty(sheet)) {//利用 sheet_to_json 方法将 excel 转成 json 数据

data =data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));//break; // 如果只取第一张表,就取消注释这行

}

}

console.log(data);

}catch(e) {//这里可以抛出文件类型错误不正确的相关提示

console.log('文件类型不正确');return;

}

};//以二进制方式打开文件

fileReader.readAsBinaryString(files[0]);

}

定义方法后在浏览器中报了如下错误:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值