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

還記得之前介紹過的pptraas吧?

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

細節就不再多做說明,因為是採用跟上次相同的概念,透過puppeteer來實作,這次提供一個更好的docker image來使用以及透過GCP Cloud run 的服務來達成無伺服器產出的目標

參考文件

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

https://github.com/puppeteer/puppeteer/blob/v1.1.0/docs/api.md#pagepdfoptions

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

https://peihsinsu.gitbooks.io/docker-note-book/content/gcp-free-registry-use.html

首先,來講一下為什麼這次改用 zenato/puppeteer-renderer 這個docker image

之前使用的 minuux/pptraas.com 其實也能做一模一樣的事情,只是他有幾個問題讓我這次決定做了更換

1. 內建的Chrome版本太舊了

2. 不曉得為什麼開發機的Nuxt Server他怎麼樣都連不上,別台伺服器同樣架構同樣在docker底下卻可以

3. 直接輸出PDF會有很多CSS讀取不到,需要先截圖後再排列圖片輸出PDF

本次更換為 zenato/puppeteer-renderer 後,可以直接用網址輸出PDF真的方便很多,而且依照作者提供的文件還可以套用puppeteer更多的參數實在方便!

如何使用

依照文件,只要將docker image跑起來即可

其中,9999 port可以自定義就好,我只是習慣放9999

接下來只要在瀏覽器輸入以下網址,或者透過其他程式語言經由get都可以直接產出檔案

這樣就可以了,這邊說明一下

type參數可以有兩個,PDF會直接匯出PDF檔案,而screenshot則是會匯出圖片檔

後面呢還可以接上不同的參數來達到擷取不同大小以及範圍的作法,詳細可以參考puppeteer document

進階做法

之前一直有想要嘗試GCP的Cloud Run服務,但苦於沒有機會,這次總算抓緊時間實驗了一番,確實可行!!!

GCP Cloud Run服務是一種無伺服器的服務,不必自己管理伺服器,只要想需要跑的image上傳到GCR上並且架設好Cloud Run

Cloud Run會提供一組網址,有需求時直接對網址做Request就行了

而Cloud Run本身平常並不會運行,處於待命或關機的狀態,只有在收到Request的同時才會將docker image跑起來並產出結果,只要一段時間沒有Request又會再次關閉

這樣的好處是,不運行的時候GCP也不會收費,因此這部分的成本支出是想對便宜的

但是缺點就是第一次的Request會因為要叫起docker image,所以反應時間會比較長一些

步驟

第一個步驟,是需要將 zenato/puppeteer-renderer image push到GCR上,根據GCP上的文件,我們必須安裝gcloud SDK後才能透過指令來處理

這邊就懶惰一點,直接使用gcp提供的cloud shell來處理docker image,至於cloud shell是什麼樣的概念呢? 可以直接參考說明文件

gcp cloud shell

進入到GCP之後可以直接點選右上角的終端機符號來打開cloud shell

gcp cloud shell

接著,你就可以在畫面下方看到黑色的終端機畫面了,這時候你可以直接把這台機器當成一台在gcp上的免費VM來使用,而且是在已經安裝好gcloud SDK的情況下

接下來就透過幾個指令來處理docker image吧

1.下載

2.增加gcr tag

就是將原本的image加上asis.gcp.io/PROJECT_ID,並且標注latest,當然你要用不同的版本號也是可以的

PROJECT_ID就是你在GCP上的專案的ID,就自行調整

3.上傳

這樣就已經把image上傳到GCR上了,接下來就可以在Cloud Run來處理其 gcp cloud run

進入到Cloud Run的業面之後,按下建立服務按鈕,開始填寫資料

gcp cloud run

服務名稱以及區域可以自訂,這次我就填寫與image相同的名稱,地區選擇台灣,按下一步

gcp cloud run image

接下來要選擇需要拿來執行的image,也就是上個步驟上傳到GCR的那個image,點選”選取”開啟介面選則 image

gcr image

 

畫面中就可以看到剛剛上傳的image了,選取他

gcp cloud run

 

接著再進階設定中不需要修改任合設定值,當然可以依照自己需求來調整資源以及通訊埠設定

gcp cloud run

最後一步,先偷懶跳過驗證,選擇”允許未經驗證的叫用要求”,接著按下建立

gcp cloud run

 

最後,等他跑完就可以看到畫面上打綠色的勾勾,確定image已經跑起來了

這時候就可以透過上面的網址來存取你要的DPF檔了喔,搭配第一部分提供的參數接上type以及URL即可

要注意的是,第一部分我們有設定9999 port,在這邊是不需要的喔,只要將參數接再網址後面即可

舉例:

484超級方便的,以上經驗提供給大家參考