zoukankan      html  css  js  c++  java
  • 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析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);
      }
    

    效果如下:
    上传解析示例

  • 相关阅读:
    ASP.NET MVC 4高级编程(第4版)
    Unity3d报告奇怪的错误CompareBaseObjectsInternal can only be called from the main thread.
    HDU 4862 Jump(更多的联合培训学校1)(最小费用最大流)
    0,22, 47, 120,(? ),290
    它们的定义Activity跳转动画
    ssh探头安全
    Netty:一种非易失堵塞client/server相框
    Swift类和结构
    php+mysql+nginx于linux部署对环境
    javascript 次序li
  • 原文地址:https://www.cnblogs.com/twodog/p/11986152.html
Copyright © 2011-2022 走看看