前言：

以前將excel數據導入到數據庫是通過前端，將excel文件上傳到后端，通過后端語言進行相應的加工將excel文件中的數據取出并存入數據庫；從而實現數據庫的存入流程。但是這也帶來了一些問題，首先是后端對excel文件數據的操作不夠透明；其次是通過服務器操作數據會造成服務器壓力和儲存的壓力增加。所以將數據的讀取放置到前端是勢在必行。

Vue將excel中的數據進行提取需要js-xlsx庫的支持。

EuiAdmin

導入500條數據測試

JavaScript庫：js-xlsx

安裝：

要安裝js-xlsx的JavaScript庫，需要安裝node.js，提供npm+vuecli的環境支持。在此基礎上將命令提示符切換到項目根目錄然后執行"npm install js-xlsx --save"便可完成安裝。

原理：

要將excel文件的數據取出，在js-xlsx庫的支持下需要三步便可完成數據的導入和數據key值的替換。

1. 文件導入，將需要提取的excel文件導入到前端。

2. Excel文件讀取，通過js-xlsx庫將數據讀取出來。

3. 通過key字典轉換，將excel中每列的標題替換為數據對應的key方便后端將數據存入數據庫。

示例代碼：

class="upload-demo"

action

:auto-upload="false"

:show-file-list="false"

:on-change="choose_file"

>

請選擇導入excel

示例圖片：

選擇excel文件：

讀取50excel數據：

替換key值后：

注意事項：

1、注意key字典數據的替換，左側為excel文件中的標題，右邊為要替換的內容；如果要存儲到數據庫那么要和數據庫的key相對應。

結語：

你可以通過訪問euiadmin.com獲取源碼進行參考，源碼位于文件src/module/excel/ImportExcel.vue文件中；你可以通過源碼更好的了解。

如果你喜歡可以"點贊+關注+評論"三聯一波。

總結

以上是生活随笔為你收集整理的vue xlsx 导入导出_只需三步vue实现excel文件数据提取并存为json数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。