React怎么實現導入導出Excel文件

這篇文章主要介紹“React怎么實現導入導出Excel文件”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“React怎么實現導入導出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>

業務層

首先分析一下工作：

• 導入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.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數據
const openDownloadDialog = (url, saveName) =>{...} // 打開下載
const sheet2blob = (sheet, sheetName) =>{...} // 轉成blob類型

理解：

• 得到處理后的json格式數據

• XLSX.utils.json_to_sheet(json) 轉換成sheet工作簿對象

• sheet2blob(sheet,saveName) 將工作簿對象轉換成 blob

• openDownloadDialog 創建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)

• datas 數據:

/*多個sheet*/
/*每個sheet為一個object */
[{
    sheetData:[], // 數據
    sheetName:"", // （非必需）sheet名字，默認為sheet1
    sheetFilter:[], //（非必需）列過濾(只有在 data 為 object 下起作用)
    sheetHeader:[] // 第一行，標題
    columnWidths: [] //（非必需）列寬，需與列順序對應
}]

瀏覽器支持：ie 10+ 我測試下來demo在chrom、Safari、IE下都是能用的。

實現效果

關于“React怎么實現導入導出Excel文件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。