React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件
表示層
這里我是使用的是antd的Upload上傳組件
引用antd部分代碼
import { Button,Table,Upload } from 'antd'; <Upload {...props} fileList={state.fileList}> <Button type="primary" >Excel導(dǎo)入</Button> </Upload> <Button type="primary" onClick={handleExport}>Excel導(dǎo)出</Button>
業(yè)務(wù)層
首先分析一下工作:
- 導(dǎo)入Excel工作:用戶上傳Excel表格,將表格內(nèi)容轉(zhuǎn)換為json對象方便后端處理,后端將數(shù)據(jù)存儲數(shù)據(jù)庫;
- 導(dǎo)出Excel工作:獲取后端json格式數(shù)據(jù),前端將數(shù)據(jù)轉(zhuǎn)換為sheet工作薄對象,生成的對象轉(zhuǎn)換為Excel表格下載導(dǎo)出;
下面就是技術(shù)層面的細節(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:''})// 將工作簿對象轉(zhuǎn)換為JSON對象數(shù)組,注意defval不設(shè)置‘'則默認值為empty
- XLSX.utils.json_to_sheet(json) // 將json對象轉(zhuǎn)換為工作簿對象
// workbook 理解: { SheetNames: ['sheet1', 'sheet2'], Sheets: { // worksheet 'sheet1': { // cell 'A1': { ... }, // cell 'A2': { ... }, ... }, // worksheet 'sheet2': { // cell 'A1': { ... }, // cell 'A2': { ... }, ... } } }
excel 導(dǎo)入
核心代碼 :
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:''}); //將工作簿對象轉(zhuǎn)換為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:''}) 將解析出的工作簿對象轉(zhuǎn)化為JSON對象
excel 導(dǎo)出
核心代碼:
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) =>{...} // 轉(zhuǎn)成blob類型
理解:
- 得到處理后的json格式數(shù)據(jù)
- XLSX.utils.json_to_sheet(json) 轉(zhuǎn)換成sheet工作簿對象
- sheet2blob(sheet,saveName) 將工作簿對象轉(zhuǎn)換成 blob
- openDownloadDialog 創(chuàng)建blob地址通過<a>標簽實現(xiàn)下載動作
excel 導(dǎo)出插件(js-export-excel)
之前為啥沒放自實現(xiàn)的代碼,那不是因為發(fā)現(xiàn)有好用的插件嘛,代碼很簡單。
核心代碼:
// 直接導(dǎo)出文件 let dataTable = []; //excel文件中的數(shù)據(jù)內(nèi)容 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文件
上為這個插件的基本用法,還支持導(dǎo)出Blob,支持壓縮等,詳細見官網(wǎng)
解釋核心 option:
- fileName 下載文件名(默認:download)
- datas 數(shù)據(jù):
/*多個sheet*/ /*每個sheet為一個object */ [{ sheetData:[], // 數(shù)據(jù) sheetName:'', // (非必需)sheet名字,默認為sheet1 sheetFilter:[], //(非必需)列過濾(只有在 data 為 object 下起作用) sheetHeader:[] // 第一行,標題 columnWidths: [] //(非必需)列寬,需與列順序?qū)?yīng) }]
瀏覽器支持:ie 10+ 我測試下來demo在chrom、Safari、IE下都是能用的。
實現(xiàn)效果
還有不懂得可以看GitHub demo源碼
結(jié)語
到此這篇關(guān)于React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件的文章就介紹到這了,更多相關(guān)React 導(dǎo)入導(dǎo)出Excel 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享
eslint的配置引入比較簡單,網(wǎng)上有比較多的教程,而stylelint的教程大多語焉不詳。在這里,我會介紹一下我在引入stylelint所遇到的坑,以及解決方法2021-11-11react拖拽組件react-sortable-hoc的使用
本文主要介紹了react拖拽組件react-sortable-hoc的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-02-02react native仿微信PopupWindow效果的實例代碼
本篇文章主要介紹了react native仿微信PopupWindow效果的實例代碼,具有一定的參考價值,有興趣的可以了解一下2017-08-08react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-03-03antd?table動態(tài)修改表格高度的實現(xiàn)
本文主要介紹了antd?table動態(tài)修改表格高度的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-07-07react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法
本篇文章主要介紹了react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12