欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件

 更新時間:2021年07月12日 09:50:48   作者:HearLing  
本文主要介紹了React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

表示層

這里我是使用的是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é)分享

    引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享

    eslint的配置引入比較簡單,網(wǎng)上有比較多的教程,而stylelint的教程大多語焉不詳。在這里,我會介紹一下我在引入stylelint所遇到的坑,以及解決方法
    2021-11-11
  • React 組件間的通信示例

    React 組件間的通信示例

    這篇文章主要介紹了React 組件間的通信示例,主要通信劃分為三種,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • react拖拽組件react-sortable-hoc的使用

    react拖拽組件react-sortable-hoc的使用

    本文主要介紹了react拖拽組件react-sortable-hoc的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2023-02-02
  • 用React實現(xiàn)一個簡單的虛擬列表

    用React實現(xiàn)一個簡單的虛擬列表

    虛擬列表是現(xiàn)在比較常用的前端渲染大數(shù)據(jù)列表的方案,目前也有很多組件庫和工具庫也都有對應(yīng)的實現(xiàn),本文將給大家介紹一下如何用React實現(xiàn)一個簡單的虛擬列表,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下
    2023-12-12
  • react native仿微信PopupWindow效果的實例代碼

    react native仿微信PopupWindow效果的實例代碼

    本篇文章主要介紹了react native仿微信PopupWindow效果的實例代碼,具有一定的參考價值,有興趣的可以了解一下
    2017-08-08
  • react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能

    react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能

    二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • react中antd文本框限制輸入中文方式

    react中antd文本框限制輸入中文方式

    這篇文章主要介紹了react中antd文本框限制輸入中文方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • antd?table動態(tài)修改表格高度的實現(xiàn)

    antd?table動態(tài)修改表格高度的實現(xiàn)

    本文主要介紹了antd?table動態(tài)修改表格高度的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2023-07-07
  • react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法

    react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法

    本篇文章主要介紹了react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • 一看就懂的ReactJs基礎(chǔ)入門教程-精華版

    一看就懂的ReactJs基礎(chǔ)入門教程-精華版

    現(xiàn)在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS,ReactJs的虛擬DOM(Virtual DOM)和組件化的開發(fā)深深的吸引了我,下面來跟我一起領(lǐng)略ReactJs的風采吧~~ 文章有點長,耐心讀完,你會有很大收獲哦
    2021-04-04

最新評論