React + js-xlsx構建Excel文件上傳預覽功能

首先要準備react開發環境以及js-xlsx插件

1. 此處省略安裝react安裝步驟react

2.下載js-xlsx插件npm

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); }

所有代碼json

（額外使用了ant design的Dragger、Table、message組件，實現拖拽點擊上傳）api

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/87892765antd

若有疑問，請在下面留言評論，或者私信我，請多多指教！ide

//