前言：

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

Vue將excel中的數(shù)據(jù)進(jìn)行提取需要js-xlsx庫的支持。

EuiAdmin

導(dǎo)入500條數(shù)據(jù)測試

JavaScript庫：js-xlsx

安裝：

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

原理：

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

1. 文件導(dǎo)入，將需要提取的excel文件導(dǎo)入到前端。

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

3. 通過key字典轉(zhuǎn)換，將excel中每列的標(biāo)題替換為數(shù)據(jù)對應(yīng)的key方便后端將數(shù)據(jù)存入數(shù)據(jù)庫。

示例代碼：

class="upload-demo"

action

:auto-upload="false"

:show-file-list="false"

:on-change="choose_file"

>

請選擇導(dǎo)入excel

示例圖片：

選擇excel文件：

讀取50excel數(shù)據(jù)：

替換key值后：

注意事項：

1、注意key字典數(shù)據(jù)的替換，左側(cè)為excel文件中的標(biāo)題，右邊為要替換的內(nèi)容；如果要存儲到數(shù)據(jù)庫那么要和數(shù)據(jù)庫的key相對應(yīng)。

結(jié)語：

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

如果你喜歡可以"點贊+關(guān)注+評論"三聯(lián)一波。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。