【React踩坑記四】React專案中引入並使用js-xlsx上傳外掛(結合antdesign的上傳元件)
最近有一個前端上傳並解析excel/csv表格資料的需求。
於是在github上找到一個14K star的前端解析外掛 github傳送門
官方也有,奈何實在太過於淺薄。於是做了以下整理,避免道友們少走一些彎路。
- 安裝依賴
yarn add xlsx //或 npm install xlsx
- 專案中引入
import * as XLSX from 'xlsx';
上傳元件(antdesign的上傳元件)
<Dragger name="file" accept={this.state.uploadInfo.suffix} beforeUpload={function(){return false;}} onChange={this.uploadFilesChange.bind(this)} showUploadList={false}> <p className="ant-upload-text"> <span>點選上傳檔案</span> 或者拖拽上傳 </p> </Dragger>
上傳並解析
uploadFilesChange(file) { // 通過FileReader物件讀取檔案 const fileReader = new FileReader(); fileReader.onload = event => { try { const { result } = event.target; // 以二進位制流方式讀取得到整份excel表格物件 const workbook = XLSX.read(result, { type: 'binary' }); // 儲存獲取到的資料 let data = {}; // 遍歷每張工作表進行讀取(這裡預設只讀取第一張表) for (const sheet in workbook.Sheets) { let tempData = []; // esline-disable-next-line if (workbook.Sheets.hasOwnProperty(sheet)) { // 利用 sheet_to_json 方法將 excel 轉成 json 資料 data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); } } //上傳成功啦,data為上傳後的資料 console.log(data); // 最終獲取到並且格式化後的 json 資料 message.success('上傳成功!') } catch (e) { // 這裡可以丟擲檔案型別錯誤不正確的相關提示 message.error('檔案型別不正確!'); } } // 以二進位制方式開啟檔案 fileReader.readAsBinaryString(file.file); }
效果如下:
相關推薦
【React踩坑記四】React專案中引入並使用js-xlsx上傳外掛(結合antdesign的上傳元件)
最近有一個前端上傳並解析excel/csv表格資料的需求。 於是在github上找到一個14K star的前端解析外掛 github傳送門 官方也有,奈何實在太過於淺薄。於是做了以下整理,避免道友們少走一些彎路。 安裝依賴 yarn add xlsx //或 npm install xlsx 專案中引入
【React踩坑記三】React項目報錯Can't perform a React state update on an unmounted component
-o clas sha ces ESS eventbus event log back 意思為:我們不能在組件銷毀後設置state,防止出現內存泄漏的情況 分析出現問題的原因: 我這裏在組件加載完成的鉤子函數裏調用了一個EventBus的異步方法,如果監聽到異步方法,則
【React踩坑記一】React項目中禁用瀏覽器雙擊選中文字的功能
一個 art 文字 star reac return 禁用 tar htm 常規項目,我們只需要給標簽加一個onselectstart事件,return false就可以 例: <div onselectstart="return false;"
【Kafka踩坑系列之一】消費者拉不出數據
dex -c 通知 還得 gin div 消費 發現 拉取 一、Bug背景 因業務需要,我們部署了兩個Kafka集群。Kafka集群A的版本號為:0.11.0.1,Kafka集群B的版本號為0.9.0.1。 因兩個Kafka集群的版本號不一致,嘗試了
【vue 入坑指南 四 】 ES6常用命令
ES6常用命令 1.變數作用域 使用 var 宣告的變數會自動進行變數提升 到js檔案/函式的最前面進行定義,有記憶體洩漏,不能及時的清除變數,一般用來定義能夠變數提升的普通變數,在函式內部有效 使用 let 宣告的變數只是在當前模組有效,並且不進行變
Vue.js 踩坑記 (四)
要開發還得選好IDE,我推薦使用 Visual Studio Code,下面看看怎麼除錯。試著除錯 node.js 的 程式碼還是上篇那段 const http = require('http');const hostname = '127.0.0.1';const port
【Kylin 踩坑之旅】kylin sum() avg() 無法返回預期的結果
在使用kylin 的時候遇到了avg()函式無法求出預期值的情況,通過檢查發現sum()函式也無法得出預期值,所以通過查詢多方資料找到了問題所在 sum() 函式與avg() 函式無法返回正確的結果 之前使用select語句求和的時候遇到了
【RN踩坑】React-native 0.45版本以上出現 boost_1_63_0.tar.gz等錯誤
請先下載第三方依賴檔案 下下來後請放置到 ~/.rncache 目錄 比如你可以開啟終端,輸入 # 井號表示註釋,不要複製井號開頭的句子 # 進入~目錄,即使用者目錄 cd ~
create-react-app踩坑記
tcs onf class working zip als mpi iconfont hat 前言 哇,不的不說這個react 這個腳手架create-react-app腳確實有很多問題,哈哈,下面來看看吧有哪些坑: 引用sass或者less 記得16
react native 踩坑記
react native 碰到的幾個坑。記錄如下。 1.com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'n.internals.offset[e]'), stack:
【PhpStorm】xdebug打斷點測試 踩坑記
首先通過 <?php echo phpinfo(); ?> 來檢視當前xampp中是否開啟了xdebug Ctrl + F 若未查詢到 xdebug,則說明未開啟;開啟 xampp\php
React-Native android在windows下的踩坑記
坑很多,跳之前做好準備。沒有VPN的同學請瀏覽完本文後慎行。 你需要先安裝最新版本的node.js(我最後使用的是v4.1.2),前往官網下載>> 注:我win7已經安裝過Visual Studio 2013和Android開發環境(也踩了不少坑,後面有
react native踩坑記(建立指定的React-Native版本)
建立指定的React-Native版本 剛剛開始學習React Native,很多都不懂,搭建環境的時候遇到了挺多問題的,一直在折騰。 我是按照React Native文件來搭建環境的,安裝react-native-cli使用的是下面的命令。 npm in
React Native踩坑記
一、遇到過的坑 1.1 執行Downloading https://services.gradle.org/distributions/gradle-2.4-all.zip時報錯 解決方法:複製報錯的下載連結,用迅雷下載, 將專案地址中的AwesomeP
react-native-viewpager踩坑記
react-native-viewpager是一個輪播圖元件,最近有一個需求是有一個測試題頁面,我第一反應是用一個輪播圖元件,只是把輪播圖替換成輪播檢視,每個視圖裡面內容比圖片複雜一些而已。。。然而,我只是這麼想想,實際做起來還不知道會遇到什麼坑,開始踩坑
Android原生專案整合React Native踩坑記
最近在學習React Native,將Android原生專案整合React Native實現混合開發。參考官網和其他一些相關資料,自己動手一步一步操作,發現真的是一步步踩坑再填坑的過程,此文章記錄整合React Native的步驟和出現的問題,方便以後查閱。
【踩坑記】同一個div綁定了多個委託事件
一直覺得自己對事件委託理解的挺深刻,今天遇到的場景,翻遍了各種資料也沒有找到答案,才加深了對事件委託的進一步理解。 事情是這樣的....(需求是這樣的) 一 應用場景 有一個ul,點選一個按鈕,動態的新增li,li裡面有兩個div,這兩個div都有一個事件。但是div1
react native 踩坑記
react native 碰到的幾個坑。記錄如下。 1.com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'n.internals.offset[e]'
Hook踩坑記:React Hook react-unity-webgl
自公司前後分離上手React以來,一個坑一個坑的踩,Class的全生命週期雲裡霧裡,還麼屢明白,就抱上了Hook的大腿不鬆手,確實爽到飛起。修改到Hook的過程基本比較順暢,直接少了三分之一的程式碼,元件更容易封裝,除錯更方便,諸多優點在此不再贅述,已有各路大佬紛紛評價,此處貼上中文官方地址:React-
react-踩坑記錄——頁面底部多出一倍高度的空白
idm 方法 left ++ dex code lock 高度 blog 掛載slider組件後頁面底部多出一倍高度的空白,如下: slider組件內容??: class Slider extends Component{ constructor(){ su