React 全面解析excel文件

 更新时间:2022年09月15日 09:31:34   作者:摸鱼第一人  
这篇文章主要介绍了React 全面解析excel文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

React解析excel文件

首先安装安装xlsx插件

yarn add xlsx

使用xlsx解析

    /**
     * 上传文件并解析成json
     */
    const HandleImportFile = (info) => {
        let files = info.file;
        // 获取文件名称
        let name = files.name
        // 获取文件后缀
        let suffix = name.substr(name.lastIndexOf("."));
        let reader = new FileReader();
        reader.onload = (event) => {
            try {
                // 判断文件类型是否正确
                if (".xls" != suffix && ".xlsx" != suffix) {
                    message.error("选择Excel格式的文件导入!");
                    return false;
                }
                let { result } = event.target;
                // 读取文件
                let workbook = XLSX.read(result, { type: 'binary' });
                let data = [];
                // 循环文件中的每个表
                for (let sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        // 将获取到表中的数据转化为json格式
                        data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
                console.log('data:', data);
            } catch (e) {
                message.error('文件类型不正确!');
            }
        }
        reader.readAsBinaryString(files);
        setIsLoading(false);
    }

使用antd的Upload组件上传文件

 <Upload
    accept=".xls , .xlsx"
    maxCount={1}
    showUploadList={false}
    customRequest={HandleImportFile}
  >
   <Button icon={<UploadOutlined />} type="primary">上传文件</Button>
 </Upload>

React上传excel预览

import React from 'react';
import * as XLSX from 'xlsx';
import {message, Table,  Upload} from 'antd';
const { Dragger } = Upload;
 
export class UploadFile extends React.Component {
  state = {
     tableData: [],
     tableHeader: []
  };
 
  toReturn = () => {
     this.props.close();
  };
 
toSubmit = () => {
   const _this = this;
   console.log(_this.state.tableData);
};
 
render() {
   return (
      <div>
            <Dragger name="file"
               accept=".xls,.xlsx" maxCount={1}
               beforeUpload={function () {
                  return false;
               }}
               onChange={this.uploadFilesChange.bind(this)}
               showUploadList={false}>
               <p className="ant-upload-text">
                  <span>点击上传文件</span>
                     或者拖拽上传
               </p>
            </Dragger>
            <Table 
               columns={this.state.tableHeader} 
               dataSource={this.state.tableData}
               style={{marginTop: '20px'}}
               pagination={false}
            />
         
   
      </div>
   );
}
 
uploadFilesChange(file) {
   // 通过FileReader对象读取文件
   const fileReader = new FileReader();
   // 以二进制方式打开文件
   fileReader.readAsBinaryString(file.file);
   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 数据
               console.log(sheet);
               data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            }
         }
         const excelData = data.Sheet1;
         const excelHeader = [];
         // 获取表头
         for(const headerAttr in excelData[0]) {
            const header = {
               title: headerAttr,
               dataIndex: headerAttr,
               key: headerAttr
            };
            excelHeader.push(header);
         }
         // 最终获取到并且格式化后的 json 数据
         this.setState({
            tableData: excelData,
            tableHeader: excelHeader,
         });
         console.log(this.state);
      } catch(e) {
         // 这里可以抛出文件类型错误不正确的相关提示
         console.log(e);
         message.error('文件类型不正确!');
      }
   };
}
}
export default UploadFile;
 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 利用React Router4实现的服务端直出渲染(SSR)

    利用React Router4实现的服务端直出渲染(SSR)

    这篇文章主要介绍了利用React Router4实现的服务端直出渲染(SSR),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • react实现同页面三级跳转路由布局

    react实现同页面三级跳转路由布局

    这篇文章主要为大家详细介绍了react实现同页面三级跳转路由布局,一个路由小案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • react实现一个优雅的图片占位模块组件详解

    react实现一个优雅的图片占位模块组件详解

    这篇文章主要给大家介绍了关于react如何实现一个还算优雅的占位模块图片组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • React表单容器的通用解决方案

    React表单容器的通用解决方案

    本文主要介绍了React表单容器的通用解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • React中路由的参数传递路由的配置文件详解

    React中路由的参数传递路由的配置文件详解

    路由的配置文件目前我们所有的路由定义都是直接使用Route组件,并且添加属性来完成的,路由的参数传递有二种方式这,两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用,本文通过示例代码详解讲解,需要的朋友参考下吧
    2022-11-11
  • ReactHooks批量更新state及获取路由参数示例解析

    ReactHooks批量更新state及获取路由参数示例解析

    这篇文章主要介绍了React Hooks如何实现批量更新state以及获取路由参数的示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-10-10
  • React中使用collections时key的重要性详解

    React中使用collections时key的重要性详解

    这篇文章主要给大家介绍了关于在React.js中使用collections时key的重要性,注意:一定不能不能忘了key,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面跟着小编来一起学习学习吧。
    2017-08-08
  • React-hooks中的useEffect使用步骤

    React-hooks中的useEffect使用步骤

    这篇文章主要介绍了React-hooks中的useEffect,对于React组件来说,主作用是根据数据(state/props)渲染UI,除此之外都是副作用(比如手动修改DOM、发送ajax请求),本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2022-05-05
  • 从零开始搭建一个react项目开发

    从零开始搭建一个react项目开发

    这篇文章主要介绍了从零开始搭建一个react项目开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 基于Cloud Studio构建React完成点餐H5页面(腾讯云 Cloud Studio 实战训练营)

    基于Cloud Studio构建React完成点餐H5页面(腾讯云 Cloud Studio 实战训练营)

    最近也是有机会参与到了腾讯云举办的腾讯云Cloud Studio实战训练营,借此了解了腾讯云Cloud Studio产品,下面就来使用腾讯云Cloud Studio做一个实战案例来深入了解该产品的优越性吧,感兴趣的朋友跟随小编一起看看吧
    2023-08-08

最新评论