react 上传excel预览

目的

        使用ract实现excel文件上传后可以预览

一、效果展示

        excel 文件

        

        预览效果

        react 上传excel预览_第1张图片

二、使用步骤

        1. 下载插件 :  npm install xlsx

        2. 引入库  : import * as XLSX from 'xlsx';

三 、具体代码

import React from 'react';
import PropTypes from 'prop-types';
import * as XLSX from 'xlsx';
import {message, Modal, Table, Button, 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 (
      

点击上传文件 或者拖拽上传

); } 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('文件类型不正确!'); } }; } } UploadFile.propTypes = { close: PropTypes.fun, id: PropTypes.string, }; export default UploadFile;

注意 :

        react 版本我用的   "react": "^16.8.6",  

        直接下载 xlsx 版本为  "xlsx": "^0.16.8",

        读取文件时,一直报错,尝试的用 npm install [email protected] 解决

自己学习笔记,代码非原创!!!!!!!

你可能感兴趣的:(前端)