文档章节

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

o
 osc_y8yehimr
发布于 2019/03/20 10:01
字数 722
阅读 34
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

首先要准备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

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

//
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
React读取Excel——js-xlsx 插件的使用

介绍 SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在 github 上有 12602 个 star, 刚好项目中遇到了前端解析 excel 的需求,所以...

osc_wme0cmft
2018/10/15
32
0
js-xlsx 实现前端 Excel 导出(支持多 sheet)

之前写文章介绍了使用 js-xlsx 实现导入 excel 的功能,现在再介绍一下如何使用 js-xlsx 进行 excel 导出。 【实现步骤】 1. 首先安装依赖 npm install xlsx --save 2. 在组件中导入 xlsx i...

osc_vnse1t2o
2019/11/13
30
0
使用JavaScript将Excel转换为JSON

JSON是码农们常用的数据格式,轻且方便,而直接手敲JSON却是比较麻烦和令人心情崩溃的(因为重复的东西很多),所以很多码农可能会和我一样,选择用Excel去输入数据,然后再想办法转换成JSO...

alentan
2019/06/13
0
0
在浏览器上打开、预览Excel xlsx表格文件

现在的HTML5,有了FileReader文件读写API, 真是让javascript的能力大幅提升。 解析zip压缩文件、解析Excel xlsx 表格文档各种文件预览,实现起来也有了可能性,以前的js是完全无法实现的。 ...

osc_fdjrfnux
2019/07/08
32
0
SheetJS js-xlsx 的使用, exceljs

js-xlsx 官方文档:https://sheetjs.gitbooks.io/docs/#sheetjs-js-xlsx npm xlsx地址:https://www.npmjs.com/package/xlsx 官网:https://sheetjs.com/opensource 首先进行安装或引入: 在......

osc_jvfdkl2k
2019/12/02
81
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式(4) 建造者模式

什么是建造者模式 经典建造者模式的优缺点 对建造者模式的扩展 什么是建造者模式 建造者模式将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。创建者模式隐藏了...

zhixin9001
20分钟前
14
0
ArrayList源码分析 —— JDK8

ArrayList的特性 ArrayList内部使用数据作为存储结构,ArrayList可以理解为数组的扩展对象,封装了常用的和非常用的操作数组的方法。以及当数组长度不足以保存数组时,自动扩容数组,通常Arr...

XuePeng77
26分钟前
32
0
__slots__的用法? - Usage of __slots__?

问题: Python中__slots__的目的是什么-尤其是关于何时以及何时不使用它的目的? 解决方案: 参考一: https://stackoom.com/question/1ymu/slots-的用法 参考二: https://oldbug.net/q/1ym...

富含淀粉
37分钟前
17
0
Python分析42年高考数据,告诉你高考为什么这么难?

作者:徐麟 历年录取率 可能很多经历过高考的人都不知道高考的全称,高考实际上是普通高等学校招生全国统一考试的简称。从1977年国家恢复高考制度至今,高考经历了许多的改革,其中最为显著的...

爱码小哥
39分钟前
19
0
CKEditor 5 + SpringBoot实战(四):SpringBoot 实现文件上传

在本系列的文章中,我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringData JPA数据持久化,CKEditor5的安装,CKEditor图片上传,...

树下魅狐
41分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部