React读取Excel——js-xlsx 插件的使用

 

介绍

SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在 github 上有 12602 个 star,

刚好项目中遇到了前端解析 excel 的需求,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。

插件地址:https://github.com/SheetJS/js-xlsx

使用

1. 安装依赖

进入项目文件夹,安装 xlsx

npm install xlsx

2. 在项目中引入

import * as XLSX from 'xlsx';

3. 定义上传 input 

<input type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />
accept 属性定义了上传文件支持的类型,onChange 操作中的 importExcel 方法定义了上传文件时执行的操作。

4. 定义获取和解析 excel 对象的方法

复制代码
onImportExcel = file => {     // 获取上传的文件对象    const { files } = file.target;     // 通过FileReader对象读取文件    const fileReader = new FileReader();     fileReader.onload = event => {       try {         const { result } = event.target;         // 以二进制流方式读取得到整份excel表格对象        const workbook = XLSX.read(result, { type: 'binary' });         let data = []; // 存储获取到的数据        // 遍历每张工作表进行读取(这里默认只读取第一张表)        for (const sheet in workbook.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]);   }
复制代码

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

复制代码
Failed to compile ./node_modules/xlsx/dist/cpexcel.js Module not found: Can't resolve './cptable' in '/Users/wangxi/Desktop/Code/admin/node_modules/xlsx/dist'
复制代码

大意是说在 cpexcel.js 文件中找不到 ./captable 模块,于是在 github 上的 issue 中输入问题,发现问题还是挺普遍的,官方给出的解决方案如下:

即在 webpack 配置文件中添加如下 external 配置:

50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信