php 上傳 excel xlsx_Vue自定義指令實作快速讀取Excel

前幾天因為業務需求，所維護的而背景中出現了大量關于上傳下載下傳Excel的操作。因為我們的背景是基于Vue，并且是在 vue-element-admin 的基礎上結合實際需求開發而來。vue-element-admin 中也有一些相關操作 Excel 的示例，都十厘清晰明了，很快就能上手。而我們當然首要參考了 vue-element-admin 的操作方式，如上傳 Excel：

<
           

在上傳 Excel 中，vue-element-admin 的做法是，點選上傳按鈕時觸發事先放在元件内的 input 的 click ,在通過監聽 input 的 change 事件，擷取讀取到的 Excel 文檔。事實上，對檔案的處理也隻能這樣了，讀取到 file 後通過 xlsx 工具庫，對 file 進行 JSON 化處理再發給後端。（不要問我為什麼這些事情要前端來做，問就是我樂意）。

剛剛說到這樣做沒得啥子問題，但是在實際項目中，尤其是背景管理系統，。幾乎很多頁面幾乎都是表格、查詢、批量操作等。最開始的時候，我就是直接把 input + 按鈕 放在業務頁面，但是随着項目慢慢變大，這樣就顯得有些臃腫了。不僅增加了代碼量，也不利于維護。于是我把這個功能封裝成了一個組将，就像 vue-element-admin 就類似那樣。但是後來随着項目越來越來，越來越多的頁面需要 Excel 操作，我對這種頻繁引入此元件的方式也開始不厭其法。這個時候其實就有兩種選擇了：将元件注冊為全局元件，或者使用自定義指令達到相同的效果。正如标題寫的那樣，我選擇了後者。

因為 Excel 這個需求，展現上無非就是：點選了某個按鈕，彈出檔案選擇，使用者選擇 Excel 後直接讀取。是以，直接參與在業務中的隻有按鈕，至于使用者在選擇 Excel 後，我需要把這部操作封裝一下，因為逐漸操作和業務沒有直接關系。是以，我需要實作一個針對選擇 Excel 按鈕的自定義指令：

// 注冊全局自定義快速讀取 excel `v-read-excel`
           

使用起來無需引入元件，更無需 input ，隻需要這樣：

<
           

原理很簡單：在被綁定按鈕插入文檔後，給這個按鈕配套一個 input 放在 body 裡，點選按鈕就會觸發 input ... 在被綁定按鈕被移除文檔同時也删除掉自己所對應的 input。

這就是關于上傳 Excel 的自定義指令封裝操作。

至于下載下傳，也是參考 vue-element-admin 的做法，不過也是為了使用簡便，就直接把方法挂在 Vue 原型上了：

Vue
           

這個用起來更簡單：

<
           

可能你也注意到了，我在這裡使用的資料是：

[
    
           

是的，key - value 都是直接用來展示的漢字。這樣做，除了友善外，也可以實作後端實時控制導出的字段，我司目前使用的就是這種方式。當然，這個要看具體的業務需求了。