? ? 最近公司項目要求對之前后端excel操作做優(yōu)化，需要放到前端來做。講道理支鸡，我覺得沒啥子必要暖侨，尤其是當(dāng)我在官網(wǎng)導(dǎo)入一張5k+的excel時瀏覽器卡死后更是覺得需求之智障椭住。但是沒法子，還是要先自己做出來看看實際效果才行字逗，我直接原地6個點......
導(dǎo)出
? ??安裝依賴
? ? ? ? cnpm i xlsx --save
? ??實現(xiàn)
? ??????定義公共組件Excel京郑，該組件需要提供導(dǎo)出按鈕宅广，當(dāng)點擊時觸發(fā)相應(yīng)邏輯
? ??????組件可接收的參數(shù)如下
? ? ? ? ? ? ? ? 默認值如下
? ??????????根據(jù)傳入的type類型決定到底是顯示導(dǎo)入、導(dǎo)出些举、預(yù)覽按鈕還是都顯示
? ??????????當(dāng)點擊導(dǎo)出按鈕跟狱，觸發(fā)回調(diào)
? ? ? ? ? ? ? ? 引入xlsx
? ? ? ? ? ? ? ? 導(dǎo)出邏輯
? ? ? ? ? ? ? ? 首先要做的就是校驗是否用戶自己實現(xiàn)了導(dǎo)出函數(shù)，以及傳入的數(shù)據(jù)是否為數(shù)據(jù)且是否為空户魏，由于不止導(dǎo)出要用驶臊，故放到untils中作公共函數(shù)，其他的輔助函數(shù)也從中導(dǎo)出
? ??????????????????isVoid函數(shù)
? ? ? ? ? ? ? ? ? ? ?getTable函數(shù)
? ??????????????????getSheetHead函數(shù)
? ??????????????????format函數(shù)
? ??????????????????getCharCol函數(shù)
? ??????????導(dǎo)出結(jié)果如下
? ??改進
? ? ? ? 可能你也發(fā)現(xiàn)了，導(dǎo)出的結(jié)果是沒有樣式信息的,那么如何增加樣式呢贞铣？答案是xlsx-style
? ??????安裝依賴
? ? ? ? ? ? cnpm i xlsx-style --save
? ??????????npm install file-saver --save
? ??????xlsx-style導(dǎo)入報錯
? ? ? ? ? ? 將報錯文件copy一份闹啦，修改后放到assets目錄下
? ? ? ? ? ? 找到umijs的webpack配置文件，新增如下配置
? ??????增加文字顏色和首行高亮處理
? ? ? ? ? ? ? ? 增加輔助函數(shù)calculateWidth
? ? ? ? ? ? ? ? 增加輔助函數(shù)addHeadlineStyle
? ? ? ? ? ? ? ? 導(dǎo)出方式使用filesave
? ? ? ? ? ? ? ? 效果如下
導(dǎo)入
? ? ? ? 現(xiàn)在琳袄，我們來完成導(dǎo)入功能，并且導(dǎo)入后需要使用表格進行分頁預(yù)覽
? ? ? ? ?新增modal彈窗纺酸，用作預(yù)覽界面
? ? ? ? 對應(yīng)函數(shù)renderBody如下
? ? ? ? 對應(yīng)函數(shù)renderButton如下
? ? ? ? 對應(yīng)函數(shù)onPageChange如下
? ? ? ? 點擊導(dǎo)入按鈕，回調(diào)處理如下
? ? ? ? 新增的輔助函數(shù)如下
? ? ? ? 新增組件狀態(tài)如下
? ? ? ? 導(dǎo)入預(yù)覽效果如下
文檔
? ??https://www.npmjs.com/package/xlsx-style
? ??https://github.com/eligrey/FileSaver.js
? ??https://www.npmjs.com/package/xlsx?activeTab=readme
如有問題樊诺，歡迎評論指正哦~~
最后仗考，還有個很重要的事情，點個贊再走吧词爬，客官~~
