React實現(xiàn)導入導出Excel文件
表示層
這里我是使用的是antd的Upload上傳組件
引用antd部分代碼
import { Button,Table,Upload } from 'antd';
<Upload {...props} fileList={state.fileList}>
<Button type="primary" >Excel導入</Button>
</Upload>
<Button type="primary" onClick={handleExport}>Excel導出</Button>
業(yè)務層
首先分析一下工作:
- 導入Excel工作:用戶上傳Excel表格,將表格內容轉換為json對象方便后端處理,后端將數(shù)據(jù)存儲數(shù)據(jù)庫;
- 導出Excel工作:獲取后端json格式數(shù)據(jù),前端將數(shù)據(jù)轉換為sheet工作薄對象,生成的對象轉換為Excel表格下載導出;
下面就是技術層面的細節(jié)
核心插件xlsx
安裝xlsx:npm install xlsx --save-dev
主要介紹用到的核心api:
- XLSX.read(data,type) // 解析Excel數(shù)據(jù)
- workbook.Sheets[workbook.SheetNames[0]] // 取到workbook對象中的第一個sheet表,規(guī)定用戶只有一個sheets,不理解workbook的下面有解釋
- XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:''})// 將工作簿對象轉換為JSON對象數(shù)組,注意defval不設置‘'則默認值為empty
- XLSX.utils.json_to_sheet(json) // 將json對象轉換為工作簿對象
// workbook 理解:
{
SheetNames: ['sheet1', 'sheet2'],
Sheets: {
// worksheet
'sheet1': {
// cell
'A1': { ... },
// cell
'A2': { ... },
...
},
// worksheet
'sheet2': {
// cell
'A1': { ... },
// cell
'A2': { ... },
...
}
}
}
excel 導入
核心代碼 :
const f = file;
const reader = new FileReader();
reader.onload = function (e) {
try{
const datas = e.target.result;
const workbook = XLSX.read(datas, {type: "binary",}); //解析datas
const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; //是工作簿中的工作表的第一個sheet
const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}); //將工作簿對象轉換為JSON對象數(shù)組
handleImpotedJson(jsonArr)// 數(shù)組處理
message.success('Excel上傳解析成功!')
}catch(e){
message.error('文件類型不正確!或文件解析錯誤')
}
};
reader.readAsBinaryString(f);
理解:
- FileReader對象實例化file對象在onload事件里進行處理
- XLSX.read 解析data
- XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}) 將解析出的工作簿對象轉化為JSON對象
excel 導出
核心代碼:
const downloadExcel = () =>{
const json = handleExportedJson(data)
const sheet = XLSX.utils.json_to_sheet(json);
openDownloadDialog(sheet2blob(sheet,"Sheet1"), "下載文件.xls")
}
const handleExportedJson = (array) =>{...} // 處理Json數(shù)據(jù)
const openDownloadDialog = (url, saveName) =>{...} // 打開下載
const sheet2blob = (sheet, sheetName) =>{...} // 轉成blob類型
理解:
- 得到處理后的json格式數(shù)據(jù)
- XLSX.utils.json_to_sheet(json) 轉換成sheet工作簿對象
- sheet2blob(sheet,saveName) 將工作簿對象轉換成 blob
- openDownloadDialog 創(chuàng)建blob地址通過<a>標簽實現(xiàn)下載動作
excel 導出插件(js-export-excel)
之前為啥沒放自實現(xiàn)的代碼,那不是因為發(fā)現(xiàn)有好用的插件嘛,代碼很簡單。
核心代碼:
// 直接導出文件
let dataTable = []; //excel文件中的數(shù)據(jù)內容
let option = {}; //option代表的就是excel文件
dataTable = data; //數(shù)據(jù)源
option.fileName = "下載文件"; //excel文件名稱
console.log("data===",dataTable)
option.datas = [
{
sheetData: dataTable, //excel文件中的數(shù)據(jù)源
sheetName: 'Sheet1', //excel文件中sheet頁名稱
sheetFilter: ['id', 'name', 'belong', 'step','tag'], //excel文件中需顯示的列數(shù)據(jù)
sheetHeader: ['項目id', '項目名稱', '所屬公司', '項目階段','項目標簽'], //excel文件中每列的表頭名稱
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下載excel文件
上為這個插件的基本用法,還支持導出Blob,支持壓縮等,詳細見官網(wǎng)
解釋核心 option:
- fileName 下載文件名(默認:download)
- datas 數(shù)據(jù):
/*多個sheet*/
/*每個sheet為一個object */
[{
sheetData:[], // 數(shù)據(jù)
sheetName:'', // (非必需)sheet名字,默認為sheet1
sheetFilter:[], //(非必需)列過濾(只有在 data 為 object 下起作用)
sheetHeader:[] // 第一行,標題
columnWidths: [] //(非必需)列寬,需與列順序對應
}]
瀏覽器支持:ie 10+ 我測試下來demo在chrom、Safari、IE下都是能用的。
實現(xiàn)效果

還有不懂得可以看GitHub demo源碼
結語
到此這篇關于React實現(xiàn)導入導出Excel文件的文章就介紹到這了,更多相關React 導入導出Excel 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
react實現(xiàn)動態(tài)增減表單項的示例代碼
在做項目的時候,甲方給的信息有限,網(wǎng)頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
在React中使用React.createRef:更優(yōu)雅的DOM引用方式
React提供了多種方式來引用DOM元素,其中React.createRef()是一種更為現(xiàn)代、更優(yōu)雅的方式,在這篇文章中,我們將深入了解React.createRef()的應用,以及它為開發(fā)者帶來的便利,感興趣的朋友一起看看吧2024-01-01

