如何用低代碼實現批量導出PDF?

前言

事情是這樣的,熟悉我們的朋友都知道,我司有一個爲廣大開發者朋友們提供學習幫助的地方,叫做新手訓練營,具體的內容就是會針對初次接觸葡萄城產品和技術的用戶,通過 2-3 天的集中學習,採用直播授課的方式幫助用戶快速上手產品,課後講師會根據講課內容佈置相應的作業,對於所有提交作業的同學會頒發結業證書,同時對於作業優秀的同學還會頒發優秀學員證書,如下圖所示:

但是隨着新手訓練營的日益火爆,參加學習的人也越來越多,證書的數量也就越來越多。而我們這邊負責運營新手訓練營的同事就遇見了這麼一個問題:由於新手訓練營的證書是手動製作的,每次在頒發證書的時候都要一個一個填每個人的姓名、訓練營的期數和授課日期的時間,這樣一來隨着報名的人越來越多,證書的數量也就越來越多,手動one by one的製作工作量越來越大,耗時長,效率低。

爲了解決這個問題,小編用我司的企業級低代碼開發平臺活字格做一個新手訓練營證書打印系統。下面是這個系統的整體功能流程圖:

系統整體功能流程圖

表設計

在設計完初始的系統功能流程之後,小編首先開始進行數據庫的表設計,因爲新手訓練營分爲四個產品(Wyn、SpreadJS、ActiveReportsJS和活字格),所以按照產品的分類設計四張表,表明也分別是產品名,字段按照Excel中的字段分別設置爲姓名、期數和日期。

界面設計

在設計完表之後,小編開始設計系統的界面,如下圖所示,左側是按照四個產品實現導航欄,點擊之後就會跳轉到相應的右邊的詳細界面。在詳細界面中,中間部分的表格用來顯示訓練營的學員信息數據,表格的最左側是選中行,在表格的上方有四個按鈕,分別是查詢、添加、刪除和導入Excel四個按鈕。在表格的下方是導出結業證書和導出優秀學員兩個按鈕。這兩個按鈕是用來分別導出選中行對應的證書,最下面是分頁欄,當表中的信息過多時可以分頁顯示。

功能設計

**導入Excel:**將新手訓練營的證書發放人員信息Excel表中的數據導入到系統中。

**批量證書打印:**可以指定任意的數據進行批量打印PDF證書,並存儲在壓縮包(壓縮包名稱爲期數名稱)中從瀏覽器上下載下來。

**添加/查詢/修改/刪除數據:**除了用Excel導入文件數據之外,還可以直接在系統中手動添加和修改數據,並批量刪除選中的數據。除此之外,當表中的數據過多時,還可以根據姓名和期數進行模糊查詢。

**分頁:**規定每頁顯示的數據條數,超過後自動分頁。

具體實現過程

下面小編將爲大家介紹一下如何使用我司的低代碼產品活字格實現,分爲前端頁面和後端邏輯兩部分。

前端頁面:

在界面設計章節中,小編已經設計好了整個系統的大致前端界面關係,接下來只需要實現即可。和傳統代碼開發不同的是,活字格在前端的設計是完全可視化的,和Excel類似,用戶只需要在活字格設計器中拖拽設計即可。

1)導航欄設計

首先設計頁面中的導航欄,它用於幫助用戶快速導航和瀏覽系統的不同功能和頁面,相當於是整個系統中的”地圖“。

下圖是活字格設計中的導航欄設置頁面,左側的一級菜單中,分別包含四個二級菜單欄分別對應四個產品信息。

**導航欄跳轉:**雙擊【一級菜單】->選擇任意一個產品->點擊【編輯命令】。

**頁面跳轉命令:**選擇【編輯命令】後跳轉到該界面,選擇【新建命令】->【頁面跳轉】並選擇要跳轉到的頁面,四個二級菜單的操作方式均一樣(由於此時還沒有創建跳轉到的頁面,所以選擇頁面這一步可以空着,等後面頁面創建完之後再回來選擇)。

2)詳細頁面設計

設計完導航頁面之後,接下來就是設計跳轉之後的詳細界面。以Wyn新手訓練營證書爲例,在已經設計好的Wyn表中右鍵選擇【從錶快速生成頁面】,就會自動生成下面兩個頁面,第一個頁面是顯示界面,第二個頁面是詳細界面,然後按照界面設計中的模板將剩餘的按鈕(查詢、刪除、導入Excel、導出結業證書和導出優秀學員)和分頁補全即可,其他三個產品的操作方式和Wyn一樣,在此不做過多贅述。

後端邏輯:

設計完前端頁面後,小編現在按照功能設計模塊中的需求一步一步實現具體每個小功能:

1)導入Excel

首先實現導入Excel這一功能,下圖是從新手訓練營系統中導出的一份獲得優秀學員和結業證書的名單模板,需要將這份Excel中的數據導入到系統中。(1和0分別代表獲得和未獲得)

下面是使用活字格實現導入Excel邏輯的全過程:

(1)選擇前端頁面設計的【導入Excel】按鈕並選擇【編輯命令】。

(2)在命令窗口中選擇【新建命令】,然後選擇【導入Excel數據到表格】命令,表格名選擇對應的數據庫表,導入模式選擇追加(追加:只追加數據;合併:追加新增數據,更新已有數據,不刪除已有數據;替換:追加新增數據,更新和刪除已有數據),導入到Excel的工作表名選擇對應的Excel中的sheet列名,跳過行數選擇導入Excel按鈕後面的文本框,表格中的列選擇頁面中對應的列即可。

2)查詢/新增/修改/刪除

1.**查詢:**選擇【查詢】按鈕中的【編輯命令】->【查詢】命令,字段選擇頁面中的字段,值選擇查詢按鈕前的查詢框。

2.**新增數據:**選擇【添加數據按鈕】->【數據庫操作】->【添加】,字段選擇頁面中的字段,值選擇字段對應的單元格。

3.**修改數據:**在顯示界面中打開【更改】的編輯命令,選擇【頁面跳轉】,跳轉頁面選擇詳情界面,目標單元格選擇詳情頁面中的更新按鈕。

在詳情頁面的單元格中,打開命令窗口,並判斷傳值,如果傳過來的是【更改】信息則更新數據,如果傳來的是【添加】則爲添加數據。

4.**刪除數據:**打開【刪除】按鈕的編輯命令,選擇【數據表操作】->【刪除】,操作記錄選擇選擇行。

3)批量證書打印

相較於前面幾個命令,批量打印證書的命令操作方式比較複雜,需要用到服務端命令,爲了讓大家更好地理解,在設計前小編先給大家簡單的介紹一下打印邏輯:

首先是根據表格中的選擇行(參數爲姓名、期數和日期)循環批量生成所有的PDF文件,並按照訓練營期數分到不同的文件夾裏面。然後第二步是將循環一中所有的期數文件夾壓縮爲zip文件(文件名爲期數),這裏需要注意的是需要將期數進行去重,因爲一期裏面有很多人,如果不去重,會生成很多重複的期數zip文件。第三步是將循環二中生成的所有zip文件刪除掉,原因是如果不刪除,再次生成和下載相同的期數zip文件時會報”文件名重複“的報錯。

邏輯理清楚後,緊接着小編開始用活字格實現:

(1)創建一個服務端命令,參數選擇對應表中的字段(ID,姓名和期數)

(2)緊接着是編輯對應的命令邏輯,第一個循環是打印所有的PDF文件,報表選擇Wyn的結業證書,文件路徑使用參數拼接,報表參數傳遞爲表id,原因是id是唯一的,不會重複。

報表頁面:期數、姓名和日期用參數替代,參數數據源選擇表id,查詢條件爲id,打印時會將對應id的姓名、期數和日期填充到報表中。

(3)第一步循環中將所有PDF打印出來後,第二個循環是按照期數將文件夾壓縮爲zip包,然後將zip包從瀏覽器中下載下來(注意需要去對期數去重)

(4)第三步循環中將第二步所生成的zip文件刪掉,需要注意的是循環數組仍然是以去重的期數爲變量。

(5)最後一步是將服務端命令放到導出結業證書按鈕的命令中,具體操作如下圖所示:

4)分頁

選擇分頁組件,在單元格設置中編輯和修改分頁行數。

以上是以Wyn新手訓練營爲例的服務端功能命令操作,其餘頁面的服務端命令和Wyn操作方法一致,在這不做過多贅述。

發佈

等到所有的頁面都設計完成之後,需要將系統發佈到雲服務器上,可以使用阿里雲、騰訊雲等服務器,也可以使用活字格雲服務器,小編以活字格雲服務器爲例,介紹如何將系統發佈到雲上:

選擇【發佈】->【服務器】->【管理髮佈設置】->【新建】,填寫用戶名和密碼之後選擇【下一步】,然後選擇【發佈】即可。

最後附上完整文件工程的Gitee地址:

https://gitee.com/GrapeCity/batch-certificate-printing

拉取方式:

**系統的價值:**在使用了這個系統之後,製作證書的時間由以前的2小時縮短到現在的5分鐘,大大提升了正式製作的工作效率。用戶在參加完訓練營後,也能更快拿到製作好的證書啦。

總結

以上就是新手訓練營實現一個批量打印PDF的全過程,如果您想了解更多有關於活字格的信息,歡迎點擊這裏查看。

擴展鏈接:

Redis從入門到實踐

一節課帶你搞懂數據庫事務!

Chrome開發者工具使用教程

從表單驅動到模型驅動,解讀低代碼開發平臺的發展趨勢

低代碼開發平臺是什麼?

基於分支的版本管理,幫助低代碼從項目交付走向定製化產品開發

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章