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

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

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

//

React + js-xlsx构建Excel文件上传预览功能的更多相关文章

  1. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  2. 用file标签实现多图文件上传预览

    效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...

  3. JQ实现图片上传预览功能

    <input type="file" name="img" id="test1"> <img src="&quo ...

  4. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  5. [js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)

    <body> <div class="box"> <div class="container"> <ul> &l ...

  6. js 移动端 多图上传 预览 删除 base64转为url 传给后端

    说下主要的逻辑,首先是利用input type="file",上传文件,然后判断文件类型是否是图片,这里要注意(multiple,安卓一次一张,ios可以多张). 接着把本地图片转 ...

  7. js实现图片上传预览功能,使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

  8. 使用ajax,结合jquery,php实现图片上传预览功能

    大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...

  9. HTML+Jquery实现多图片上传预览功能

    HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...

随机推荐

  1. Python 基于Python实现批量创建目录

    基于Python实现批量创建目录 by:授客QQ:1033553122 测试环境: Python版本:Python 2.7   代码实践 #!/usr/bin/env python # -*- cod ...

  2. .Net Core(一)环境搭建与基本使用

    .Net Core(一)环境搭建与基本使用 一.系统配置 a) Linux下如果想要打开类似任务管理器,可以使用top命令,在控制台会动态刷新CPU和内存占用.进程等信息.vmstat和free命令可 ...

  3. 小程序 青少儿书画 利用engineercms作为服务端

    因为很多妈咪们喜欢发布自己宝宝的作品,享受哪些美好时刻,记录亲子创作过程. 为了方便妈咪们展示亲子创作,比如宝宝们画作,涂鸦,书法,作文,其他才艺,特利用engineercms作为服务端,重新设计了一 ...

  4. loadrunner11迭代录制注册账号

    1.创建一个新的web脚本 2.我们就以loadrunner自带的WebTours为例子 3.点击确定后进入Web Tours主页,点击sign up now进行注册 4.输入用户名:test,密码: ...

  5. 适用于 Azure 虚拟网络的常见 PowerShell 命令

    如果想要创建虚拟机,需要创建虚拟网络或了解可在其中添加 VM 的现有虚拟网络. 通常情况下,创建 VM 时,还需考虑创建本文所述资源. 有关安装最新版 Azure PowerShell.选择订阅和登录 ...

  6. jquery常用表单操作

    //js将表单序列化成对象 $.fn.serializeObject = function () { var $els = $(this).find("[name]"); var ...

  7. https证书概念

    https://studygolang.com/articles/10776 http://www.360doc.com/content/15/0520/10/21412_471902987.shtm ...

  8. 第七章 鼠标(CHECKER3)

    /*--------------------------------------------- CHECKER3.C -- Mouse Hit-Test Demo Program No.3 (c) C ...

  9. django中admin

    我们在models中建立了表结构,想要在admin中表示: from django.contrib import admin from . import models for table in mod ...

  10. 如何在Windows上挂载Linux系统分区

    NFS普遍用于unix之间共享,windows默认是不支持这种文件系统的.如果我们要用windows访问NFS的话,而windows系统自身又不支持这种文件系统,那么我们该怎么办? 别急,小编这就手把 ...