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组件,实现拖拽点击上传)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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
如有疑问,请在下面留言评论,或者私信我,请多多指教!
//