React + js-xlsx构建Excel文件上传预览功能

React + js-xlsx构建Excel文件上传预览功能

 

首先要准备react开发环境以及js-xlsx插件

 

1. 此处省略安装react安装步骤

2.下载js-xlsx插件

yarn add xlsx 或者 npm install xlsx

在项目中引入

import * as XLSX from 'xlsx';

 

  • 定义插件,并暴露出去
/**
 * @author tangzedong.programmer@gmail.com
 * @apiNote excel预览插件
 * @since 2019-02-14 10:36:42
 */
export default class Preview extends React.Component {
    //...
}
  • 定义全局变量,用于数据接收后重新渲染页面
state = {
  tableData: [], // table的数据
  tableHeader: [] // table的表头
};
  • 通过render返回预览视图(用table表格预览数据,Table是使用的ant design)
render() {
return (
    <div>
      <Table columns={this.state.tableHeader} dataSource={this.state.tableData}/>
    </div>
  );
}
  • 解析excel文件
  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 数据
            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);
        }
        // 解析后的变量赋值给state,重新渲染table页面
        // message.success('上传成功!')
        this.setState({
          tableData: excelData,
          tableHeader: excelHeader,
        })
        console.log(this.state)
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        console.log(e);
        // message.error('文件类型不正确!');
      }
    }
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(file.file);
  }

全部代码

(额外使用了ant design的Dragger、Table、message组件,实现拖拽点击上传)

import React from "react";
import * as XLSX from 'xlsx';
import antd, {message, Table} from 'antd';

const Dragger = antd.upload.Dragger;


/**
 * @author tangzedong.programmer@gmail.com
 * @apiNote 音频、视频、excel、图片预览插件
 * @since 2019-02-14 10:36:42
 */
export default class Preview extends React.Component {
  state = {
    tableData: [],
    tableHeader: []
  };

  render() {
    return (
      <div>
        <Dragger name="file"
                 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}/>
      </div>
    );
  }

  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 数据
            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 数据
        message.success('上传成功!')
        this.setState({
          tableData: excelData,
          tableHeader: excelHeader,
        })
        console.log(this.state)
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        console.log(e);
        message.error('文件类型不正确!');
      }
    }
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(file.file);
  }

}
View Code

特别鸣谢:https://blog.csdn.net/twodogya/article/details/87892765

如有疑问,请在下面留言评论,或者私信我,请多多指教!

//
posted @ 2019-03-20 10:01 dawn-tangzedong 阅读(...) 评论(...) 编辑 收藏
发布了114 篇原创文章 · 获赞 7 · 访问量 6万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览