React讀取Excel——js-xlsx 外掛的使用

onImportExcel = file => {
// 獲取上傳的檔案物件
const { files } = file.target;
// 通過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) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法將 excel 轉成 json 資料
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一張表，就取消註釋這行
}
}
console.log(data);
} catch (e) {
// 這裡可以丟擲檔案型別錯誤不正確的相關提示
console.log('檔案型別不正確');
return;
}
};
// 以二進位制方式開啟檔案
fileReader.readAsBinaryString(files[0]);
}

定義方法後在瀏覽器中報瞭如下錯誤：

Failed to compile
./node_modules/xlsx/dist/cpexcel.js
Module not found: Can't resolve './cptable' in '/Users/wangxi/Desktop/Code/admin/node_modules/xlsx/dist'

大意是說在 cpexcel.js 檔案中找不到 ./captable 模組，於是在 github 上的 issue 中輸入問題，發現問題還是挺普遍的，官方給出的解決方案如下：

即在 webpack 配置檔案中新增如下 external 配置：

externals: [
{
'./cptable': 'var cptable',
'../xlsx.js': 'var _XLSX'
}
]

儲存並重新編譯，瀏覽器又丟擲如下錯誤：

The externals config must be Plain Object or Function, but got [object Object]

"externals 配置項必須為純物件或函式，但是卻得到了物件形式的陣列"，所以原因是 externals 的格式不對：

externals 配置支援三種形式，分別是 Array、Object 和 Reg，上述的配置項內容是一個物件，所以應該為用 Object 形式，所以只要把外面的中括號去掉就可以了：

externals: {
'./cptable': 'var cptable',
'../xlsx.js': 'var _XLSX'
 }

更多關於 webpack externals 配置的學習，可以參考：【 webpack externals 深入理解 】

測試

執行程式碼，在瀏覽器中開啟頁面顯示如下：

點選 Choose File，在本地選擇一個內容如下的 excel 檔案：

點選確定，上傳後在瀏覽器控制檯檢視列印資訊：

可以發現，excel 已經讀取成功並且轉換成了 json 格式的資料，之後就可以對 json 資料進行分析和處理啦。

完善

1. 使用原生 input 標籤顯示效果比較粗糙，因為對元件簡單地進行了樣式上的美化，效果如下：

2. 針對檔案上傳和讀取結果分別做了對應的提示（這裡使用 ant design 中的 message 元件）

demo 完整程式碼如下：

// excel.js
import React, { Component } from 'react';
import { Button, Icon, message } from 'antd';
import * as XLSX from 'xlsx';
import styles from './index.less';

class Excel extends Component {
onImportExcel = file => {
// 獲取上傳的檔案物件
const { files } = file.target;
// 通過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) {
// esline-disable-next-line
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法將 excel 轉成 json 資料
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一張表，就取消註釋這行
}
}
// 最終獲取到並且格式化後的 json 資料
message.success('上傳成功！')
console.log(data);
} catch (e) {
// 這裡可以丟擲檔案型別錯誤不正確的相關提示
message.error('檔案型別不正確！');
}
};
// 以二進位制方式開啟檔案
fileReader.readAsBinaryString(files[0]);
}
render() {
return (
<div style={{ marginTop: 100 }}>
<Button className={styles['upload-wrap']}>
<Icon type='upload' />
<input className={styles['file-uploader']} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />
<span className={styles['upload-text']}>上傳檔案</span>
</Button>
<p className={styles['upload-tip']}>支援 .xlsx、.xls 格式的檔案</p>
</div >
);
}
}

export default Excel;

// index.less
.upload-wrap {
display: inline-block;
position: relative;
width: 124px;
padding: 3px 5px;
overflow: hidden;
}

.file-uploader {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
opacity: 0;
background-color: transparent;
}

.upload-text {
display: inline-block;
margin-left: 5px;
}

.upload-tip {
display: inline-block;
margin-left: 10px;
color: #999;
}

【參考】

前端讀取Excel報表檔案

SheetJS的使用（js-xlsx）

SheetJS js-xlsx

webpack externals 深入理解