vue中el-table表格Excel導出功能,前端處理后端的返回數據流


題記:之前項目中有一個導出功能的實現,由於業務需求(老板做外貿定制化的)導出的表格種類比較多,所以用博客來記錄一下 。后端返回數據圖如下

思路:當時一個人負責后台管理系統,所以就圖省事用了element組件庫中 el-table上自帶的插件( Element組件庫中的el-table表格導出需要的主要是兩個依賴:(xlsx 和 file-saver) ),然而效果差強人意,出來的有重復,反正效果不好,可能本人使用的不恰當。這里就不介紹這種方法了,感興趣的可以試試,到處都能搜到資料。說下我這邊最后實現我們業務需求的方式,統一由后端定好表格數據樣式什么的,統一發過來一份數據流接收。當然看不懂,因為根本沒法看。放心不影響,只要你會接收數據就行:

當然到這里基本上就算成了。

接下來就是請求的一些小問題了截圖奉上如下:1.是導出事件2.簡單的一個請求接口3.改成自己的導出表格標題

 

到這里就已經OK了。至於有人提出請求方式方式get和post兩個我這邊根據請求參數的多少來決定,參數多就用post,至於get應該也是可以的吧,我這邊沒有嘗試,就不發言了。

忘了一件很重要的事情:如下圖划線部分一定要記得寫上!!!跟自己設置請求頭一個意思,資料上都有可以自己查,或者直接粘貼即可。如下圖紅線標2

附上我這邊的樣例以供參考。如下圖


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM