Contents
  1. 1. pdf的js框架遇到的問題
  2. 2. 使用html2canvas的解法
  3. 3. summary

這一陣子因為工作上的需求,必須將ajax到的資料轉成pdf,因此將所survey的記錄下來。
其實在大學期間,於資訊中心打工時,就有用到 iTextSharp 進行pdf檔案的輸出,但是透過後端語言及pdf模板,用此framework將資料丟進pdf內,因此需要一定格式及pdf模板的建置。
這次survey到的方法是將一個div透過前端的方式生成。

pdf的js框架遇到的問題

針對僅用前端進行pdf的輸出需求,一開始挑的是使用 jsPDF https://parall.ax/products/jspdf進行pdf的建置,但後來發現jsPDF不支援中文。

後來找了另一款 pdfmake http://pdfmake.org/,但還是遇到了中文的問題,中文字體必須要透過gulp方式進行打包
(Custom Fonts client side)
字體轉成base64的方式後放進js當作資源,於此就會因為中文字體包size導致前端運作的效能低落,因此這也不是一個好辦法。

使用html2canvas的解法

在stackoverflow看到推薦使用 html2canvas 加上 pdfmake
http://stackoverflow.com/questions/34049956/generate-pdf-from-html-using-pdfmake-in-angularjs/34162901#34162901
透過先將div轉成影像再進行輸出,就能夠避免中文及css格式問題。

使用jquery可能會像以下這樣撰寫

summary

透過html轉成圖進行中文字的建構方式雖然解決了格式及字體的問題,但是換頁部分其實還沒解決,等到我找到方法再回來進行補充。

Comments