2019/10/17 :補充更新

參考這篇就可以了,pptraas.com可以處理中文問題

html to pdf 輸出最漂亮的完整PDF

—————————————————————————–

原則上,

HTML 產出 PDF的方法很多種,最出名的大概就是wkhtmltopdf了

今天要介紹的是另一種我認為目前最簡便的方式 :

  1. 透過Chrome Headless 模擬將網頁列印成PDF
  2. 透過現成的docker image (puppeteer)啟動Chrome Headless服務

如果不曉得什麼事puppeteer可以先參考

https://ithelp.ithome.com.tw/articles/10199544

其實只要依照下方參考文件直接啟動puppeteer docker image就可以產出PDF了,本篇的重點在於”中文”

需要在套件中多安裝中文語言套件才可以正確將中文網頁轉換成PDF檔案,否則中文字都會變成亂碼

如果你對docker還不熟悉,可以先閱讀以下文章

MAC安裝Docker

docker 小工具 : Kitematic 與 懶人指令包

用docker架FTP vsftpd on docker

參考文件

https://hub.docker.com/r/zenato/puppeteer-renderer

https://github.com/zenato/puppeteer-renderer

https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

如何加入中文字型套件?

這就是今天的重點了,首先到原作的github上,將整個專案下載下來

你會找到一個Dockerfile 檔案,透過編輯器來編輯他

我們必須要將安裝中文字型檔的指令加入Dockerfile中,並且重新打包image

根據puppeteer github上issue的討論需要加入以下指令

因此編輯完成的Dockerfile將變成

接著重新打包docker image

以上,完成

最後稍微說明一下如何使用

透過docker run 啟動image

當然,IMAGENAME就是剛剛build時輸入的,將著等待容器啟動後就可以透過URL來轉換PDF

如果將上面的url輸入瀏覽器有看到網頁的話代表docker正確執行,後面接上參數就可以依照指令執行

Name Required Value Description Usage
url yes Target URL http://puppeteer-renderer?url=http://www.google.com
type pdf or screenshot Rendering another type. http://puppeteer-renderer?url=http://www.google.com&type=pdf
(Extra options) Extra options (see puppeteer API doc) http://puppeteer-renderer?url=http://www.google.com&type=pdf&scale=2

範例1 :

範例2 :

option可以接哪些參數可以參考 puppeteer API doc