首先要準備react開發環境以及js-xlsx外掛
1. 此處省略安裝react安裝步驟
2.下載js-xlsx外掛
yarn add xlsx 或者 npm install xlsx
在專案中引入
import * as XLSX from 'xlsx';
- 定義外掛，並暴露出去
/**
* @author [email protected]
* @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 [email protected]
* @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
如有疑問，請在下面留言評論，或者私信我，請多多指教！
//