亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2018年01月27日 10:26:17   作者:SeaLone  
這篇文章主要介紹了ejsExcel模板在Vue.js項目中的實際運用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

什么是ejsExcel?

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

Excel模板


導出后

Github地址

ejsExcel

如果因為眾(ni)所(dong)周(de)知的原因打不開github,沒有關系,它的語法很簡單,都是一些對Excel模板格式的定義:

這篇文章是我在工作中因為業(yè)務需要,用到了ejsExcel這個模板引擎,覺得很不錯,但是坑也不少。而網上相關的資料又太少,所以趁此機會總結了一下我的踩坑經歷。
我是在Vue.js這個前端框架中用到的ejsExcel,由于我本人并不是專業(yè)做前端開發(fā)的,我會盡量的說清楚,如果有些地方寫的不是太專業(yè)的話,還請見諒!

第一步:安裝ejsExcel

npm install ejsexcel

安裝完依賴包之后是放在xxx/node_modules/ejsexcel目錄下的,核心文件是ejsExcel.js,所以如果想要使用該模板引擎,必須引入該文件:

import Excel from 'exceljs'

踩坑一:

安裝完之后,官方是給了一個測試案例的,放在ejsexcel/test目錄下,我建議初學者先不要放在實際項目中使用,自己先另開一個進程運行一下測試案例。
在github中,作者給出方法是在test目錄下運行test.bat這個文件,經過我實際的測試,該命令在windows系統(tǒng)中,需要使用

node test.bat

命令才可以運行成功,而在Mac中,是運行不了的。

如果要在Mac端運行,使用

node testExcel.js

運行即可。

測試案例很簡單,當你看懂測試案例是如何運作的之后剩下的就沒有問題了,沒看懂的也沒關系,以我們上面運行的testExcel.js為例:

怎么樣,很簡單吧!

第二步:編寫模板

根據自己的業(yè)務邏輯,將你要導出的數據按照上面的語法在Excel中寫好,這一步不難,只是有點煩,需要你有點耐心。

編寫好模板之后,可以將它放到你的項目中去,具體放在哪里隨便你,但是最好不要離核心代碼太遠,畢竟我們在渲染數據時是需要讀取模板路徑的,放的路徑太深,麻煩的還是自己。

第三步:獲取數據源

test中的測試例子,都是一些假數據,但是在實際的開發(fā)中我們需要根據需求,動態(tài)的獲取數據和導出數據。

我的做法是將核心文件的引入、數據的獲取、Excel模板的渲染分裝成三個部分。然后再使用export default導出這些方法,使其可以被全局調用。


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


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

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

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

保存的路徑是你自己定的,你也可以自己寫一個方法,動態(tài)的選擇文件渲染好之后的存儲路徑。

大概就是這么多,業(yè)務邏輯方面其實不難,可能就是在制作Excel模板時需要一點耐心和細心。
上面的這些都是我自己在項目中的代碼,請千萬不要局限于我寫的代碼,思路最重要,要根據實際情況來處理業(yè)務。只要思路理清了,問題就解決一大半了。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue實現(xiàn)視頻全屏切換功能

    vue實現(xiàn)視頻全屏切換功能

    這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細, 具有一定的借鑒價值,有需要的小伙伴可以參考一下
    2023-11-11
  • vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)

    vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘Combin

    這篇文章主要介紹了vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09
  • vue文件批量上傳及進度條展示的實現(xiàn)方法

    vue文件批量上傳及進度條展示的實現(xiàn)方法

    開發(fā)項目的時候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關于vue文件批量上傳及進度條展示的實現(xiàn)方法,需要的朋友可以參考下
    2022-12-12
  • 使用Vue2實現(xiàn)簡單的購物車功能(可直接使用)

    使用Vue2實現(xiàn)簡單的購物車功能(可直接使用)

    這篇文章主要給大家介紹了如何使用Vue2實現(xiàn)簡單的購物車功能,文中有相關的代碼示例,對我們的學習或工作有一定的幫助,需要的朋友可以參考下
    2023-08-08
  • vue 數據遍歷篩選 過濾 排序的應用操作

    vue 數據遍歷篩選 過濾 排序的應用操作

    這篇文章主要介紹了vue 數據遍歷篩選 過濾 排序的應用操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 使用vue封裝一個自定義樣式的滾動條

    使用vue封裝一個自定義樣式的滾動條

    眾所周知,當容器高度固定而內容部分高度超出容器高度時,瀏覽器會渲染出一個可以滾動并用于顯示剩余界面的條 -- 滾動條,它可以簡單的樣式修改,但是位置是固定的,無法移動,而我們需要改變位置的時候,它就不能滿足我們的需求了,這時我們可以自己手寫一個
    2023-10-10
  • 如何換個角度使用VUE過濾器詳解

    如何換個角度使用VUE過濾器詳解

    這篇文章主要給大家介紹了如何換個角度使用VUE過濾器的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用VUE具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-09-09
  • vue3利用store實現(xiàn)記錄滾動位置的示例

    vue3利用store實現(xiàn)記錄滾動位置的示例

    這篇文章主要介紹了vue3利用store實現(xiàn)記錄滾動位置的示例,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • Vue聯(lián)動Echarts實現(xiàn)數據大屏展示

    Vue聯(lián)動Echarts實現(xiàn)數據大屏展示

    這篇文章主要為大家介紹了Vue聯(lián)動Echarts實現(xiàn)數據大屏的展示示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-04-04
  • Element MessageBox彈框的具體使用

    Element MessageBox彈框的具體使用

    這篇文章主要介紹了Element MessageBox彈框的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07

最新評論