ejsExcel在Vue.js項目中的實際運用

什麼是ejsExcel？

ejsExcel是一款國人開發的、在Node.js應用程序中使用咱們預先設置好的Excel模板導出Excel表格的模板引擎。

Excel模板

導出後

Github地址
ejsExcel

若是由於衆（ni）所（dong）周（de）知的緣由打不開github，沒有關係，它的語法很簡單，都是一些對Excel模板格式的定義：

這篇文章是我在工做中由於業務須要，用到了ejsExcel這個模板引擎，以爲很不錯，可是坑也很多。而網上相關的資料又太少，因此趁此機會總結了一下個人踩坑經歷。
我是在Vue.js這個前端框架中用到的ejsExcel，因爲我本人並非專業作前端開發的，我會盡可能的說清楚，若是有些地方寫的不是太專業的話，還請見諒！

第一步：安裝ejsExcel

npm install ejsexcel

安裝完依賴包以後是放在xxx/node_modules/ejsexcel目錄下的，核心文件是ejsExcel.js,因此若是想要使用該模板引擎，必須引入該文件：

import Excel from 'exceljs'

---

踩坑一：

安裝完以後，官方是給了一個測試案例的，放在ejsexcel/test目錄下，我建議初學者先不要放在實際項目中使用，本身先另開一個進程運行一下測試案例。
在github中，做者給出方法是在test目錄下運行test.bat這個文件，通過我實際的測試，該命令在windows系統中，須要使用

node test.bat

命令才能夠運行成功，而在Mac中，是運行不了的。
若是要在Mac端運行，使用

node testExcel.js

運行便可。

---

測試案例很簡單，當你看懂測試案例是如何運做的以後剩下的就沒有問題了，沒看懂的也不要緊，以咱們上面運行的testExcel.js爲例：

怎麼樣，很簡單吧！

第二步：編寫模板

根據本身的業務邏輯，將你要導出的數據按照上面的語法在Excel中寫好，這一步不難，只是有點煩，須要你有點耐心。
編寫好模板以後，能夠將它放到你的項目中去，具體放在哪裏隨便你，可是最好不要離核心代碼太遠，畢竟咱們在渲染數據時是須要讀取模板路徑的，放的路徑太深，麻煩的仍是本身。

第三步：獲取數據源

像test中的測試例子，都是一些假數據，可是在實際的開發中咱們須要根據需求，動態的獲取數據和導出數據。
個人作法是將核心文件的引入、數據的獲取、Excel模板的渲染分裝成三個部分。而後再使用export default導出這些方法，使其能夠被全局調用。

在Vue中，我作了一個導出按鈕，當點擊這個button時，觸發方法，去獲取咱們data{}中的數據，獲取到數據後做爲參數，傳入咱們封裝好的數據源方法中

而後在getMachiningData方法中獲取參數，並格式化。

第四步：使用數據渲染模板

再調用renderDataUseTemp方法，將格式化好的數據傳入，進行數據的渲染：

保存的路徑是你本身定的，你也能夠本身寫一個方法，動態的選擇文件渲染好以後的存儲路徑。

大概就是這麼多，業務邏輯方面其實不難，可能就是在製做Excel模板時須要一點耐心和細心。
上面的這些都是我本身在項目中的代碼，請千萬不要侷限於我寫的代碼，思路最重要，要根據實際狀況來處理業務。只要思路理清了，問題就解決一大半了。

以上。

感謝ejsExcel的做者：Sail、輻轂Git中有他們的QQ羣以及捐贈入口，但願各位不差錢的小夥伴們能夠多多支持開源做者。^_^