[[393772]]

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),汾西網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:汾西等地區(qū)。汾西做網(wǎng)站價(jià)格咨詢:13518219792

關(guān)于生成PDF的需求大部分要放在服務(wù)端實(shí)現(xiàn)，那么前端是否可以生成PDF呢?

本文目的：

• 記錄一種新的前端生成PDF的技術(shù)
• 記錄一種CMS配置化PDF方案的猜想

前端市場中的PDF

這是一個(gè)常見的需求，那么就一定有一些現(xiàn)成的技術(shù)方案。一種是基于服務(wù)端的實(shí)現(xiàn)，一種是基于客戶端的實(shí)現(xiàn)。

相對于服務(wù)端來說，iText、wkhtmltopdf、prince這三個(gè)都是后端生成pdf的工具。可惜這三個(gè)都沒有node api。

相對于客戶端而言，最常見的就是Html轉(zhuǎn)化方案。如JSPDF技術(shù)。

此方案的邏輯是：

• 將DOM樹轉(zhuǎn)換為canvas對象，可使用html2canvas完成
• 將canvas轉(zhuǎn)換為圖片，可使用canvas.toDataURL完成
• 將圖片轉(zhuǎn)換為PDF，可使用jsPDF完成

此方案的弊端也比較明顯：

• 生產(chǎn)的PDF比較模糊，質(zhì)量不高
• 瀏覽器兼容性，對css樣式支持不夠，比如陰影
• 分頁效果不理想，會(huì)出現(xiàn)斷層、缺失等問題
• 如果HTML中有外鏈圖片，無法生成
• 由于第一步是通過DOM去生成canvas，所以針對特別長的報(bào)告，DOM尚未加載完便點(diǎn)擊下載時(shí)，會(huì)造成報(bào)告生成問題

還有一種方案是依靠瀏覽器自帶的打印window.print，此方案的重點(diǎn)在于CSS樣式控制。如果你想要實(shí)現(xiàn)改變頁面大小、邊距、設(shè)置頁眉頁腳等等效果，可能還需要Prince(應(yīng)用程序，需要安裝)。

最后來說一下pdfmake技術(shù)，純js技術(shù)實(shí)現(xiàn)PDF的生成，提供服務(wù)端生成和客戶端生成方案，可以說是非常便捷。還提供了動(dòng)態(tài)演示文檔，你可以自由的拼接內(nèi)容。

我就是被這個(gè)頁面“征服”的。它可以自定義實(shí)現(xiàn)頁眉、頁腳定制化、封面定制化、水印設(shè)置、PDF加密等等。而且它的使用也非常方便只需要兩個(gè)js即可，一個(gè)是pdfmake.js,另一個(gè)是字體文件vfs_fonts.js。

同樣它的弊端也特別明顯，文本元素沒有內(nèi)邊距，樣式較局限，沒有html那么靈活。相對于其他技術(shù)而言，對JS程序員來說是非常的友好了，比較重要的是3年以來一直有人在維護(hù)?；久總€(gè)月都有更新。

CMS方案猜想

關(guān)于cms的理解，可以自行百度，而對于我而言，cms就是配置化。之前寫過一篇關(guān)于表單的CMS技術(shù)方案，是相對于比較成熟的方案。解決了商品配置，app動(dòng)態(tài)顯示的難題。缺點(diǎn)就是牽一發(fā)動(dòng)全身，一直沒有時(shí)間去更新、填充新的規(guī)則。

關(guān)于CMS-PDF的猜想，也是為了解決PDF模版定制化的問題。平常開發(fā)一個(gè)pdf模版可能需要一個(gè)團(tuán)隊(duì)一個(gè)月的時(shí)間，CMSPDF要做的就是縮短開發(fā)時(shí)間，提高開發(fā)效率，提供可配置化方案。

想要實(shí)現(xiàn)這個(gè)方案，首頁考慮的是什么，是我們使用的方式和要達(dá)到的效果。通俗點(diǎn)，就是一套數(shù)據(jù)代表一個(gè)模版，而這套數(shù)據(jù)的生成就是靠我們配置(點(diǎn)點(diǎn)點(diǎn))。那么我們要考慮的問題就明確了：

• 分析需求pdf的樣式，解析出模塊類型
• 建立模版與接口數(shù)據(jù)的關(guān)聯(lián)關(guān)系(橋梁)
• 建立模版綁定關(guān)系

pdfmake提供了一些很好的api，方便我們一邊設(shè)計(jì)模塊，一邊查看效果。例如，我們想要左邊配置，右邊預(yù)覽。

需要注意的一點(diǎn)就是pdfmake默認(rèn)不支持中文，需要你自己尋找pdf報(bào)告所需字體，并且字體的一些屬性，比如粗體、斜體也需要字體支持。

此方案難點(diǎn)在于模塊類型的設(shè)計(jì)，你需要建立頁面顯示數(shù)據(jù)結(jié)構(gòu)與pdfmake代碼規(guī)則數(shù)據(jù)結(jié)構(gòu)之間的聯(lián)系。對模塊類型，沿用pdfmake的就行，只需要在其上在封裝一層即可。

比較復(fù)雜的是表格的樣式設(shè)計(jì)，比如你怎么配置表格每條邊線的樣式，并且與服務(wù)端返回?cái)?shù)據(jù)之間建立關(guān)系。所以說對細(xì)微樣式這塊比較難搞。

此方案還未落地，但不失為一個(gè)很好實(shí)踐方案。對樣式要求不是特別高的可以嘗試一下。

 

文章標(biāo)題：前端PDF配置化？CMS+PDF
網(wǎng)站鏈接：http://uogjgqi.cn/article/coggcgo.html