這裡我是使用的是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>
🌴 業務層首先分析一下工作：
「導入」Excel工作：用戶上傳Excel表格，將表格內容轉換為json對象方便後端處理，後端將數據存儲資料庫；「導出」Excel工作：獲取後端json格式數據，前端將數據轉換為sheet工作薄對象，生成的對象轉換為Excel表格下載導出；下面就是技術層面的細節
✨ 核心插件xlsx安裝xlsx：npm install xlsx --save-dev
主要介紹用到的核心api：
XLSX.read(data,type) // 解析Excel數據
workbook.Sheets[workbook.SheetNames[0]] // 取到「workbook」對象中的第一個sheet表，規定用戶只有一個sheets，不理解workbook的下面有解釋
XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:』』}）// 將工作簿對象轉換為JSON對象數組，注意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對象數組
handleImpotedJson(jsonArr)// 數組處理
message.success('Excel上傳解析成功！')
}catch(e){
message.error('文件類型不正確！或文件解析錯誤')
}
};
reader.readAsBinaryString(f);
理解：
FileReader對象實例化file對象在onload事件裡進行處理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數據
const openDownloadDialog = (url, saveName) =>{...} // 打開下載
const sheet2blob = (sheet, sheetName) =>{...} // 轉成blob類型
理解：
XLSX.utils.json_to_sheet(json) 轉換成sheet工作簿對象sheet2blob(sheet,saveName) 將工作簿對象轉換成 blobopenDownloadDialog 創建blob地址通過<a>標籤實現下載動作🍑 excel 導出插件（js-export-excel）之前為啥沒放自實現的代碼，那不是因為發現有好用的插件嘛，代碼很簡單。
核心代碼：
// 直接導出文件
let dataTable = []; //excel文件中的數據內容
let option = {}; //option代表的就是excel文件
dataTable = data; //數據源
option.fileName = "下載文件"; //excel文件名稱
console.log("data===",dataTable)
option.datas = [
{
sheetData: dataTable, //excel文件中的數據源
sheetName: 'Sheet1', //excel文件中sheet頁名稱
sheetFilter: ['id', 'name', 'belong', 'step','tag'], //excel文件中需顯示的列數據
sheetHeader: ['項目id', '項目名稱', '所屬公司', '項目階段','項目標籤'], //excel文件中每列的表頭名稱
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下載excel文件
上為這個插件的基本用法，還支持導出Blob，支持壓縮等，詳細見官網
解釋核心 「option」:
fileName 下載文件名(默認：download)
/*多個sheet*/
/*每個sheet為一個object */
[{
sheetData:[], // 數據
sheetName:'', // （非必需）sheet名字，默認為sheet1
sheetFilter:[], //（非必需）列過濾(只有在 data 為 object 下起作用)
sheetHeader:[] // 第一行，標題
columnWidths: [] //（非必需）列寬，需與列順序對應
}]
瀏覽器支持：ie 10+ 我測試下來demo在chrom、Safari、IE下都是能用的。
🌸 實現效果2021-07-09 12.23.55 1 1.gif還有不懂得可以看 GitHub demo源碼
🍀 結語這是一個簡單的業務實現，仔細的總結了一下。💗 感謝你看到這～💗 ，如果覺得不錯麻煩點個讚 👍
剛忙完畢業的事兒，事情沒有那麼多了，又可以慢慢發文了，預告下一篇吧，關於我的「畢業設計」，給大家看個效果圖：
image.png我感覺這個可以到時候改成 🌟博客啥的，畢竟開發了挺久的，想著有點用嘛 😂