如何在Vue.js項(xiàng)目中使用ejsExcel模板

今天就跟大家聊聊有關(guān)如何在Vue.js項(xiàng)目中使用ejsExcel模板，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

什么是ejsExcel？

ejsExcel是一款國(guó)人開(kāi)發(fā)的、在Node.js應(yīng)用程序中使用我們預(yù)先設(shè)置好的Excel模板導(dǎo)出Excel表格的模板引擎。

Excel模板

導(dǎo)出后

Github地址

ejsExcel

如果因?yàn)楸姡╪i）所（dong）周（de）知的原因打不開(kāi)github，沒(méi)有關(guān)系，它的語(yǔ)法很簡(jiǎn)單，都是一些對(duì)Excel模板格式的定義：

這篇文章是我在工作中因?yàn)闃I(yè)務(wù)需要，用到了ejsExcel這個(gè)模板引擎，覺(jué)得很不錯(cuò)，但是坑也不少。而網(wǎng)上相關(guān)的資料又太少，所以趁此機(jī)會(huì)總結(jié)了一下我的踩坑經(jīng)歷。
我是在Vue.js這個(gè)前端框架中用到的ejsExcel，由于我本人并不是專業(yè)做前端開(kāi)發(fā)的，我會(huì)盡量的說(shuō)清楚，如果有些地方寫的不是太專業(yè)的話，還請(qǐng)見(jiàn)諒！

第一步：安裝ejsExcel

npm install ejsexcel

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

import Excel from 'exceljs'

踩坑一：

安裝完之后，官方是給了一個(gè)測(cè)試案例的，放在ejsexcel/test目錄下，我建議初學(xué)者先不要放在實(shí)際項(xiàng)目中使用，自己先另開(kāi)一個(gè)進(jìn)程運(yùn)行一下測(cè)試案例。
在github中，作者給出方法是在test目錄下運(yùn)行test.bat這個(gè)文件，經(jīng)過(guò)我實(shí)際的測(cè)試，該命令在windows系統(tǒng)中，需要使用

node test.bat

命令才可以運(yùn)行成功，而在Mac中，是運(yùn)行不了的。

如果要在Mac端運(yùn)行，使用

node testExcel.js

運(yùn)行即可。

測(cè)試案例很簡(jiǎn)單，當(dāng)你看懂測(cè)試案例是如何運(yùn)作的之后剩下的就沒(méi)有問(wèn)題了，沒(méi)看懂的也沒(méi)關(guān)系，以我們上面運(yùn)行的testExcel.js為例：

怎么樣，很簡(jiǎn)單吧！

第二步：編寫模板

根據(jù)自己的業(yè)務(wù)邏輯，將你要導(dǎo)出的數(shù)據(jù)按照上面的語(yǔ)法在Excel中寫好，這一步不難，只是有點(diǎn)煩，需要你有點(diǎn)耐心。

編寫好模板之后，可以將它放到你的項(xiàng)目中去，具體放在哪里隨便你，但是最好不要離核心代碼太遠(yuǎn)，畢竟我們?cè)阡秩緮?shù)據(jù)時(shí)是需要讀取模板路徑的，放的路徑太深，麻煩的還是自己。

第三步：獲取數(shù)據(jù)源

像test中的測(cè)試?yán)?，都是一些假?shù)據(jù)，但是在實(shí)際的開(kāi)發(fā)中我們需要根據(jù)需求，動(dòng)態(tài)的獲取數(shù)據(jù)和導(dǎo)出數(shù)據(jù)。

我的做法是將核心文件的引入、數(shù)據(jù)的獲取、Excel模板的渲染分裝成三個(gè)部分。然后再使用export default導(dǎo)出這些方法，使其可以被全局調(diào)用。

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

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

第四步：使用數(shù)據(jù)渲染模板

再調(diào)用renderDataUseTemp方法，將格式化好的數(shù)據(jù)傳入，進(jìn)行數(shù)據(jù)的渲染：

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

看完上述內(nèi)容，你們對(duì)如何在Vue.js項(xiàng)目中使用ejsExcel模板有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。