标签：xlsx 插件 sheet React json workbook const 上传

最近有一个前端上传并解析excel/csv表格数据的需求。
于是在github上找到一个14K star的前端解析插件 github传送门
官方也有，奈何实在太过于浅薄。于是做了以下整理，避免道友们少走一些弯路。

• 安装依赖

yarn add xlsx //或 npm install xlsx

• 项目中引入

import * as XLSX from 'xlsx';

上传组件（antdesign的上传组件）

<Dragger name="file" accept={this.state.uploadInfo.suffix} beforeUpload={function(){return false;}} onChange={this.uploadFilesChange.bind(this)} showUploadList={false}>
   <p className="ant-upload-text">
     <span>点击上传文件</span>
     或者拖拽上传
     </p>
 </Dragger>

上传并解析

uploadFilesChange(file) {
      // 通过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) {
            let tempData = [];
            // esline-disable-next-line
            if (workbook.Sheets.hasOwnProperty(sheet)) {
              // 利用 sheet_to_json 方法将 excel 转成 json 数据
              data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            }
          }
          //上传成功啦,data为上传后的数据
          console.log(data);
          // 最终获取到并且格式化后的 json 数据
          message.success('上传成功！')
        } catch (e) {
          // 这里可以抛出文件类型错误不正确的相关提示
          message.error('文件类型不正确！');
        }
      }
      // 以二进制方式打开文件
      fileReader.readAsBinaryString(file.file);
  }

效果如下：

标签：xlsx,插件,sheet,React,json,workbook,const,上传
来源： https://www.cnblogs.com/twodog/p/11317362.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。