ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用
什么是ejsExcel?
ejsExcel是一款國人開發(fā)的、在Node.js應(yīng)用程序中使用我們預(yù)先設(shè)置好的Excel模板導(dǎo)出Excel表格的模板引擎。
Excel模板

導(dǎo)出后

Github地址
如果因?yàn)楸姡╪i)所(dong)周(de)知的原因打不開github,沒有關(guān)系,它的語法很簡單,都是一些對Excel模板格式的定義:

這篇文章是我在工作中因?yàn)闃I(yè)務(wù)需要,用到了ejsExcel這個模板引擎,覺得很不錯,但是坑也不少。而網(wǎng)上相關(guān)的資料又太少,所以趁此機(jī)會總結(jié)了一下我的踩坑經(jīng)歷。
我是在Vue.js這個前端框架中用到的ejsExcel,由于我本人并不是專業(yè)做前端開發(fā)的,我會盡量的說清楚,如果有些地方寫的不是太專業(yè)的話,還請見諒!
第一步:安裝ejsExcel
npm install ejsexcel
安裝完依賴包之后是放在xxx/node_modules/ejsexcel目錄下的,核心文件是ejsExcel.js,所以如果想要使用該模板引擎,必須引入該文件:
import Excel from 'exceljs'
踩坑一:
安裝完之后,官方是給了一個測試案例的,放在ejsexcel/test目錄下,我建議初學(xué)者先不要放在實(shí)際項(xiàng)目中使用,自己先另開一個進(jìn)程運(yùn)行一下測試案例。
在github中,作者給出方法是在test目錄下運(yùn)行test.bat這個文件,經(jīng)過我實(shí)際的測試,該命令在windows系統(tǒng)中,需要使用
node test.bat
命令才可以運(yùn)行成功,而在Mac中,是運(yùn)行不了的。
如果要在Mac端運(yùn)行,使用
node testExcel.js
運(yùn)行即可。
測試案例很簡單,當(dāng)你看懂測試案例是如何運(yùn)作的之后剩下的就沒有問題了,沒看懂的也沒關(guān)系,以我們上面運(yùn)行的testExcel.js為例:

怎么樣,很簡單吧!
第二步:編寫模板
根據(jù)自己的業(yè)務(wù)邏輯,將你要導(dǎo)出的數(shù)據(jù)按照上面的語法在Excel中寫好,這一步不難,只是有點(diǎn)煩,需要你有點(diǎn)耐心。
編寫好模板之后,可以將它放到你的項(xiàng)目中去,具體放在哪里隨便你,但是最好不要離核心代碼太遠(yuǎn),畢竟我們在渲染數(shù)據(jù)時是需要讀取模板路徑的,放的路徑太深,麻煩的還是自己。
第三步:獲取數(shù)據(jù)源
像test中的測試?yán)?,都是一些假?shù)據(jù),但是在實(shí)際的開發(fā)中我們需要根據(jù)需求,動態(tài)的獲取數(shù)據(jù)和導(dǎo)出數(shù)據(jù)。
我的做法是將核心文件的引入、數(shù)據(jù)的獲取、Excel模板的渲染分裝成三個部分。然后再使用export default導(dǎo)出這些方法,使其可以被全局調(diào)用。

在Vue中,我做了一個導(dǎo)出按鈕,當(dāng)點(diǎn)擊這個button時,觸發(fā)方法,去獲取我們data{}中的數(shù)據(jù),獲取到數(shù)據(jù)后作為參數(shù),傳入我們封裝好的數(shù)據(jù)源方法中

然后在getMachiningData方法中獲取參數(shù),并格式化。

第四步:使用數(shù)據(jù)渲染模板
再調(diào)用renderDataUseTemp方法,將格式化好的數(shù)據(jù)傳入,進(jìn)行數(shù)據(jù)的渲染:

保存的路徑是你自己定的,你也可以自己寫一個方法,動態(tài)的選擇文件渲染好之后的存儲路徑。
大概就是這么多,業(yè)務(wù)邏輯方面其實(shí)不難,可能就是在制作Excel模板時需要一點(diǎn)耐心和細(xì)心。
上面的這些都是我自己在項(xiàng)目中的代碼,請千萬不要局限于我寫的代碼,思路最重要,要根據(jù)實(shí)際情況來處理業(yè)務(wù)。只要思路理清了,問題就解決一大半了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vscode中的vue項(xiàng)目報錯Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項(xiàng)目報錯Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue文件批量上傳及進(jìn)度條展示的實(shí)現(xiàn)方法
開發(fā)項(xiàng)目的時候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue文件批量上傳及進(jìn)度條展示的實(shí)現(xiàn)方法,需要的朋友可以參考下2022-12-12
使用Vue2實(shí)現(xiàn)簡單的購物車功能(可直接使用)
這篇文章主要給大家介紹了如何使用Vue2實(shí)現(xiàn)簡單的購物車功能,文中有相關(guān)的代碼示例,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3利用store實(shí)現(xiàn)記錄滾動位置的示例
這篇文章主要介紹了vue3利用store實(shí)現(xiàn)記錄滾動位置的示例,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-04-04
Vue聯(lián)動Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
這篇文章主要為大家介紹了Vue聯(lián)動Echarts實(shí)現(xiàn)數(shù)據(jù)大屏的展示示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04

