整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
育機構在做定制化軟件開發的時候，會遇到這樣一個問題：機構需要定制自己的錯題本封面和封底，并且題目界面需要有各種便簽可供學生標記，例如下面這個圖：
要顯示這樣的錯題界面，如果用word形式，一種辦法是通過html轉換成word，但是這樣會導致部分理科題目無法顯示的情況；另一個辦法是直接在word中顯示html，這種形式其實還是html，體驗不太好，打印出來也會出問題。所以我們采取的是通過PDF的形式展示這種格式，并且還可以定制封面和封底：如下圖:
因為PDF是比較好的打印格式，不會出現混亂的情況，所以目前就是怎么解決html完美轉換成PDF的問題。
我們嘗試了很多插件以后，最終發現下面這2個工具比較合適：wkhtmltopdf和phantomjs，下面分別試一下他們的效果：
本文希望通過自己的開發經驗，減少教育軟件開發者的坑。可以通過下面這個網站進行測試：http://www.widomk12.cn
言
目前，教學、教研各種內容線上沉淀、展示豐富多彩，但線上內容“線下化”能力不足或過分依賴人力，比如，線上練習題組卷后以PDF形式分發給學生，家長希望將考試、練習題目打印后，學生帶到學校去做（高中生使用手機等電子設備的時間有限），線上各類分析報告以PDF形式分享給學生/家長等。
從業務方面看，不同業務線的多個業務場景都有輸出PDF的訴求，如果各業務線自己設計、實現符合自身業務場景的具體方案，除調研、開發工作量較大之外，還會有重復調研，踩坑的情況。
從技術角度看，線上內容轉PDF的內容源頭來自于H5富文本內容，業界內以此為基礎的PDF生成方案多種多樣，也各有優劣，比如：
方案對比-表格-1
因此，我們綜合了各種PDF生成方案并總結了在探索講義生成PDF過程中的經驗，抽象出了一套通用的，可復用的能力供各業務線快速利用，基本方案和優劣如下：
最終方案-表格-2
目 標
旨在提供一套以H5為載體的PDF通用生成方案，這套方案有如下特點：
這套方案可分為兩個核心部分，頁面展示側 - Medusa，PDF生成側 - Hydra
頁面展示側 - Medusa
我們頁面展示側的通用能力——Medusa，是基于Paged.js的二次封裝，并以NPM包形式提供給業務方使用。Medusa可對任何HTML進行分頁、并根據配置添加頁眉、頁腳等，最終將處理后的HTML渲染到頁面中。Medusa封裝并簡化了對PDF格式的配置，可覆蓋絕大多數業務場景，使得各業務場景將更多精力投入其自身業務邏輯的開發。
之所以選擇Pagedjs為基礎開發我們自己的SDK，是因為它是目前我們能找到的唯一開源的、具有HTML內容分頁，樣式處理的前端庫，同時我們也在講義中經過了長期的摸索與沉淀。
接下來將詳細介紹Paged.js原理、Medusa支持的功能與使用方法。
一 Paged.js是如何工作的
Paged.js包含了 3 個大模塊
這里將主要介紹 Previewer 和 Chunker，因為我們的二次開發和維護不涉及到Polisher。
Previewer
Previewer 的工作非常簡單，但我們會主要利用它封裝我們的Medusa，初始化一個Previewer對象，Previewer初始化了Chunker和Polisher對象：
Medusa-代碼-1
再調用Previewer的preview()方法，preview()方法做了兩件事：
Medusa-代碼-2
當chunker.flow結束，即可在瀏覽器看到整個頁面處理完之后的樣子。
Chunker
首先，Chunker解析、預處理需要分頁的HTML，為其添加一些必要的屬性
Medusa-代碼-3
然后創建容納所有頁(pages)的容器，并掛載到renderTo容器下(默認Body)，以備組織后續的所有頁：
Medusa-代碼-4
接著，chunker創建了一個page模版，以便增加頁面使用：
Medusa-代碼-5
其中，TEMPLATE是Pagedjs內部創建頁面時所使用的基礎模版。
Medusa-代碼-6
接下來，chunker進入了渲染+分頁過程（這個過程我們不會在二次開發中做修改，但需要了解其基本思路以便在出問題時能有解決思路），這個過程在循環一個迭代器（*layout），迭代器一直在做3件事：
原則：
尋找overflow時會將盡可能多的內容節點插入內容區域，這里，“盡可能多”分為幾種情況，比如：
步驟：
Pagedjs遵循了如下步驟去尋找overflow：
兩個前置條件：
i. 從需要處理的內容第一個節點開始，判斷是否 node.left >= contentArea.right || node.top >= contentArea.bottom
Medusa-代碼-7
ii.如果不滿足，則判斷 node.right <= contentArea.right && node.bottom <= contentArea.bottom
Medusa-代碼-8
iii.如果不滿足，那說明有子節點overflow了，則繼續深入其子節點查找即可。
3.使用模版添加新的頁面，并從BreakToken處繼續上述動作。
二 Medusa支持的功能及使用方法
基于Paged.js，Medusa支持了如下功能，并為業務方提供了更加簡潔、定制化的配置。
下方是調用Medusa的代碼示例：
Medusa-代碼-9
1.1 動態頁面分頁能力
Medusa核心功能，可將連續的HTML頁面轉化成一頁頁PDF樣式的HTML。
1.2 單頁模版配置 -> 生成能力
通過Grid布局，Paged.js將一個單頁模版分為多個區域，整體分為2個大的部分：
業務方通過簡單的配置，即可還原UI設計稿中的PDF樣式，例子如下圖：
1.2.1 base
頁面基礎配置是對每頁的。支持紙型或頁面寬高、內容區域margin、padding、背景及水印的設置。
在封裝Medusa時，Medusa將讀取傳入的頁面模版配置、靜態頁內容配置，并將樣式上的配置解析并轉化為Previewer可理解的樣式內容，比如頁面寬高的設置：
Medusa-代碼-10
將被轉化為：
Medusa-代碼-11
1.2.2 surround
2. 目前支持3種類型的surround item:
example:
Medusa-代碼-12
1.3 前/后置靜態頁面
業務方可通過如下方式配置靜態頁面的具體內容：
Medusa-代碼-13
其中，傳入的React JSX Element將會被這樣處理：
Medusa-代碼-14
處理完成后，將HTML String拼接到頁面模版中，再插入分頁后內容的前后。
PDF生成側 - Hydra：
頁面展示側為PDF生成做好了頁面的準備，對于PDF生成側，需要做的工作就更純粹了，業務方除了請求生成PDF，定期檢查PDF生成的進度，無需做任何額外工作。
1.整體流程：
PDF生成是CPU和內存密集型的，由于頁面內容的不確定性，也意味著頁面渲染時間與生成PDF的時間都是不確定的，因此整體PDF生成的鏈路被設計成是異步的，如下圖：
整體流程上，業務方在請求生成PDF時，會先在后端做一條記錄，后端再將任務發送給Node服務，即Hydra；
在生成PDF時， 第 1 步是做頁面上的準備，一個生成任務可能有多個URL頁面需要生成PDF，所以我們預先啟動對應URL數量的PPTR Page，頁面都啟動完成后，進入下一步；
第 2 步：渲染頁面，這個過程中，如果請求是包含多個URL的，這些頁面會同步渲染，在所有頁面渲染完成后，進入下一步。
第 2.5 步，如果是需要生成連續頁碼的一整個PDF，還會做額外的一個動作：頁碼矯正，通過頁碼矯正，可以將同步渲染的每個頁面，按照其之前頁面的頁碼數修正，以保證整體PDF的頁碼的連貫。
第 3 步，通過PPTR Page的能力將頁面轉換為PDF buffer，如有必要，再將生成的PDF buffer拼接到一起生成一整個PDF，或者將每個PDF buffer都生成一個PDF，壓縮成zip文件。
第 4 步，文件上傳OSS，最終返回OSS CDN鏈接。
2.請求生成PDF：
業務側請求將對應頁面生成PDF的時，只需傳入如下字段：
Hydra-代碼-1
3.PDF生成過程：
正如在整體流程中所述，PDF生成側，我們借助 PPTR 的能力打開頁面并生成PDF流。
在頁面調用 Medusa 分頁、組裝能力時，所有內容分頁組裝完成后會向body中插入了一個額外的DOM以標識該頁面處理完成：
Hydra-代碼-2
這是為了 Hydra 感知頁面渲染完成所做的準備，當生成服務的 PPTR 等到該DOM出現時，則表示頁面成功渲染并處理完成了：
Hydra-代碼-3
此后，在上面已經提到過，對于需要將多個頁面生成的PDF拼接成一個PDF的情況，在生成PDF之前需要做一個重要的動作，即頁碼矯正，原因如下：
并且我們不希望頁面的處理是串行的，因為串行勢必導致速度較慢，生成時間長。
這個問題的解決方案如下：
1. 對于每個頁面都啟用一個page，并同時處理
2. 每個頁面處理完成后（pdfLastDOM出現），通過Page.$eval()來統計頁數并記錄:
Hydra-代碼-4
3. 計算出頁面中分頁之后每一個頁面的起始頁碼，以及所有頁面的頁碼總和
4. 再修改頁碼容器樣式的 counterReset 值即可，其后續頁碼可自遞增。
Hydra-代碼-5
5. 之后，再通過 Medusa 在頁面window對象中Polyfill的相關配置，比如需要生成的PDF的單頁寬、高以生成PDF流。
Hydra-代碼-6
6. 最后如有必要，通過pdf-lib拼接這些 pdfBuffer 即可。
Hydra-代碼-7
7. PDF生成完成后，上傳OSS并返回URL鏈接
4.性能、穩定性保證：
在整體方案落地前，我們對服務進行了多次性能測試：
以下載題目為例，在4個容器，每個容器 3C 12G 的配置下的并行處理能力如下：
對于 20 道題目，每個PDF生成任務在 15 頁左右，平均 1 分鐘內能完成 280 個任務的處理。
對于 40 道題目，每個PDF生成任務在 30 頁左右，平均 1 分鐘內能完成 105 個任務的處理。
對于 60 到題目，每個PDF生成任務在 40 頁左右，平均 1 分鐘內能完成 54 個任務的處理。
同時，根據 Hydra 服務的整體的處理能力，后端通過任務隊列的形式幫助我們保證服務不被瞬間的突刺流量擊垮。
已接入/正在接入的相關業務線及場景：
目前，公司有 5 大業務線，8 個場景已經完全接入我們的能力用于 H5 轉 PDF，如下是錯題本、內容資料庫接入后生成的PDF樣例：
錯題本：
內容資料庫試卷：
未來展望
目前整體的PDF生成方案已經能夠滿足大多數場景和內容，但依然有可改進空間。
HTML的流式布局要求我們必須手動的對內容分頁，才能添加頁眉，頁腳等（即Mdusa做的工作），正因為如此，在處理復雜的內容時，可能會出現一些問題：比如，遇到復雜表格時，由于表格可能會有多種多樣的行、列合并，同時表格單元格內的內容也可以多種多樣，在分頁過程中，Medusa內部的PagedJS并不能完美的處理對于長、且復雜的表格的分割，因此可能遇到分割后表格單元格缺失、錯亂或寬高錯誤的問題，這些問題在講義中體現較明顯。
我們仍在持續關注與研究復雜DOM內容的分割問題，會嘗試加以優化和改進PagedJS的能力，同時，我們也以另外一種思路設計了自己的DOM分頁器方案，但經過評估，由于實現比較復雜，成本較高，暫時沒有投入開發資源。
不過，我們相信，未來我們一定能以更完美的方式分割DOM以生成更高質量的PDF。
作者:高源、陳欣博
來源:微信公眾號:高途技術
出處:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg
得去年用過一款口袋打印機，那時候只能打印一些圖片和文本類的信息。而如今口袋打印機有了很多新的功能，這次在新浪眾測活動中獲得的啵哩智能口袋打印機就是一款專注于學習、工作的實用工具。
它通過與手機App的結合可以完成錯題解析、搜題打印、筆記整理及學英語、掃描文檔和課程表制作等學習功能，還可以通過打橫幅、打圖片等功能為我們日常工作帶來便捷。
啵哩智能口袋打印機是由小濠（深圳）科技有限公司針對學生用戶研發，它通過與互聯網應用的結合和多元化的場景應用，將傳統的打印機變成了學習減負的好幫手。這次測試也會將重點放在打錯題功能上，同時對支持更多后期編輯及創意的打圖片功能進行了視頻演示。下面就來看看這款學習工作小幫手表現如何吧。
【開箱】
在啵哩智能口袋打印機的包裝上可以看到很多卡通元素，比如包裝側面，四只小啵哩就告訴我們，它的特色功能是打錯題、列清單、做手帳和傳紙條。這些經過特別設計小啵哩造型形態可掬，別說孩子了，我看到都喜歡。
在包裝背面，是啵哩智能口袋打印機的產品參數、功能說明及廠家相關信息。從產品參數可以看到，啵哩口袋打印機的產品尺寸為83×83×38.5mm，加上鸚鵡嘴后寬度也才為100mm，整個外觀尺寸還是比較小巧的。
打開包裝，包裝內部比較簡潔，其實在內包裝設計上也可以加入些卡通元素，或者將黑色的吸塑包裝換成彩色或許會為啵哩智能口袋打印機增添不少分值。啵哩智能口袋打印機共有4種顏色可選，分別是海藍色、啵哩綠、妥妥黃和櫻桃粉，我拿到的是海藍色。其實顏色的區別也只是鸚鵡嘴和燈光顏色的不同，而機身顏色并沒有隨之改變。建議后期指示燈能通過App改變顏色，并將四色的鸚鵡嘴磁性帖一起附送，這樣會更加的人性化。
【外觀細節】
看到啵哩智能口袋打印機的外觀，不知道為什么會忽然想到一休哥。后來想想，應該是因為它的電源鍵和指示燈組成的圖形有點像一個盼晴娘的原因。這個鸚鵡嘴裝飾裝厲害了，它不僅可以作為啵哩智能口袋打印機的外觀配飾，它還是一個磁性帖。可以將打印出來紙條只接吸在冰箱或是金屬材質上。
在打印機背面印制有產品信息，機身的右側是啵哩智能口袋打印機的充電接口和復位孔。機身的四角采用了圓弧過渡，再加上表面的磨砂處理，拿在手里手感非常潤滑。經過這幾天的使用，經常與桌面接觸的機身背面和側邊都沒有刮花現象，看來表面強度也是非常高的。
口袋打印機和普通打印機最大的區別就是它的耗材，因為它采用的熱敏打印所以耗材只有打印紙而不用換墨盒。啵哩智能口袋打印機的打印紙更換非常簡單，只要將上下蓋輕輕一推，就可以打開蓋子。然后將打印紙放到紙槽，并拉出適量長度到出紙口即可。啵哩口袋打印機耗材規格為58×30mm，因為隨機附送的是普通紙，如果是想打印便利貼或是彩色貼紙，只要在官網購買不干膠和多彩打印紙即可。
啵哩智能口袋打印的有效打印寬度為48mm，打印分辨率為203DPI。使用標準打印紙時，兩邊會有5mm的留邊。在使用打大圖時要想完美拼接就要將留邊剪下才可。對于打印機的打印速度，這與打印的內容多少和選擇的深度有關系，啵哩智能口袋打印最大40mm/s的打印速度也是相當快速了。另外，啵哩智能口袋打印內置有無紙檢測，開蓋檢測等傳感器。在設備檢測到無紙或沒有蓋好蓋子時，指示燈會快速閃爍報警。
打印機底部的送紙機構，采用的是耐高溫材質，在剛打印完時會有高溫，一定要注意不要碰觸打印頭及這個部位以防燙傷。在出口處，是一條45度的鋸齒撕紙口，對于撕紙的效果實測并不是十分滿意，鋸齒邊緣可以看到有明顯的毛邊。建議后期可以開發一種自動切紙機構，比較采用輥式切刀。
【功能使用】
在正式使用之前，首先要下載啵哩App。按提示完成安裝并注冊登錄賬號后就可以進入App主界面了。啵哩App的主界面是由首頁、發現、素材廣場和我的界面組成。在首頁界面可以完成啵哩口袋打印機的各種功能，并且可通過下面的進階攻略可以學會很多使用技巧；發現界面其實就是一個互動的環節，可以通過推薦或是查看最新的動態，并可關注喜歡的達人；也可以點擊中間的+號圖標發布自己的動態；在素材廣場里，有各類不同的素材可以直接下載或收藏備以后使用；而我的主要是設備的信息及使用記錄等內容。
啵哩智能口袋打印機在初次使用，先要先將設備與手機綁定。啵哩智能口袋打印機支持兩種添加方式，可以直接通過藍牙來查找設備，也可以雙擊打印機電源鍵打印專屬二維碼，然后以掃碼方式連接。如果直接使用查找設備的方式，手機App需要獲得定位權限；而掃碼連接感覺更好玩一些。
1、打錯題
啵哩智能口袋打印機的主要功能就是打錯題，其依托于作業幫，內置了1.8億海量的專業題庫，涵蓋了小學、初中和高中教材及練習冊題目，對于難題還有多種解題步驟。只要使用啵哩App的打錯題功能，就可以自動得到試題的解析，并可收藏或打印出來備后期復習。
在啵哩App里還可以將錯題進行分類管理，默認的有語文、數學和英語三種，也可以根據打印內容添加科目。并且在打印選項里可以選擇是以橫向還是縱向進行打印。橫向打印時，很明顯會比縱向打印的內容顯得更清晰。不過對于內容較多時，會出現多頁的打印情況，后期需要進行拼接才能保存完整的錯題解析。
2、打圖片
啵哩App的打圖片功能也是非常強大的，其重點是圖片的后期編輯處理，其不僅有豐富的濾鏡功能，還可以進行編輯、旋轉、裁剪、橡皮擦和打大圖功能。通過使用濾鏡等功能可以打印出不同類型的照片，比如現在比較火的哪吒造型，就可以通過后期編輯打印出不同創意的貼圖。
我是一名電氣自動化工程師，會經常出差，有時候需要一些圖紙，就可以拿出啵哩智能口袋打印機直接打印了。不過，以默認的方式直接打印，即使是采用高濃度打印，圖片的內容也是很難分辨。這與打印機分辨率是有關系，不過可以通過打印的畫幅太小，來彌補分辨率的缺陷。這時，就要用到打大圖功能，將圖片分為多部分進行打印，然后后期拼接就可以打印出清晰的內容了。
這是最終的打印效果，可以很明顯的看出，使用打大圖功能后，這張圖片的大小對接后和實際的A4紙差不多。圖紙內元件的序號標識都可以清楚分辨。而默認打印出的圖片標識模糊成一片，這兩者完全是天壤之別。這也是打圖片的樂趣所在。
3、掃描文稿
喜歡看書的朋友一定會有這樣的情況，比如看到一些精美的句子都要記錄下來。對于網絡內容，我們可以通過打網頁來完成，而對于實物書籍或雜志時，就可以通過啵哩的新功能掃描文稿來完成。
其實掃描文稿的作用還有很多，比如我們需要將一段文本進行再編輯時。就可以通過手機掃描選擇需要的內容，然后通過文本識別就可以進行編輯了。如果是怕識別有誤，還可以通過校對在同屏下進行比對，或是前期直接選擇合適的文本深度來保證識別的正確率。我隨機通過掃描了一段文稿，文本識別正確率為100%，掃描文稿的功能還是非常不錯的。
4、濃度對比
無論是在打圖片還是文本，在最后的打印選項里都會有濃度的選擇。當然，也可以通過編輯功能來調整打印內容的濃度，但對于最終的選擇效果也是比較明顯的。這里以一張默認的圖片和一張經過簡單編輯后的圖片，分別以淡、適中和濃三種濃度打印出的效果對比如下：
在使用濃度為淡時，打印的顏色濃度會比較淺，但打印速度也會比較快一些。如果是對于長文本或是網頁打印，對打印質量沒有過多要求的話，這種模式下打印速度會提升不少。其實，多數情況下，使用默認的適中濃度即可。
5、分辨率
其實在之前已經說過，啵哩智能口袋打印機的打印分辨率為203DPI。這個打印精度如果只是打印一些便貼或是文本類的橫幅什么的，打印效果還是可以接受的。但對于打印一些圖片內的文本就明顯不足了，雖然后期可以通過打大圖等功能進行彌補，但要想完美保存，還需要進行拼接等操作。
總結
其實啵哩智能口袋打印機的功能還有很多，比如可通過不同素材和創意，設計出個性化的玩紙條功能；也可以使用不同的耗材，來打印便利貼或是彩色貼畫。這不僅可以為孩子學習減負，對我們的工作和生活其實都是很有幫助的。特別是這次出差，雖然打印出的圖紙需要幾張拼接一起，但要比拿著電腦去現場輕松了許多。現在啵哩智能口袋打印機已經推出了打印精度更高的啵哩L2，希望它能夠成為孩子和家長更喜歡的小幫手。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
