Node.js 學習筆記 — Puppeteer 運用 (一) : 網頁截圖與PDF輸出

Puppeteer 是一款 Node.js library ，它提供非常多API，能藉由 Chrome DevTools Protocol 控制/模擬 Chrome or Chromium 動作 。

【APPX 時賦科技】

appxtech

👇【Puppeteer 運用(二)】👇

Node.js 學習筆記 — Puppeteer 運用(二) : 網路爬蟲

What can puppeteer do?

Most things that you can do manually in the browser can be done using Puppeteer! — By Puppeteer official

幾個官方提出的例子 :

1. 網頁螢幕截圖、PDF輸出。
2. SPA(Single-Page Application) 爬蟲 & SSR(Server-Side Rendering) 內容
3. 建立UI自動化測試流程，可模擬鍵盤輸入、滑鼠點擊等行為。
4. 對網站進行效能評估 …等等

這篇我們來對這第一個例子做簡單的練習~

Install

安裝
npm i puppeteer
or
npm i puppeteer-core

第一種安裝會順帶下載最新版本的Chromium，來確保所有API都能正常運作，但若你已經有安裝好的Chrome browser 則可以選擇 puppeteer-core 即可，差別只在建立 browser 時需指定browser的執行檔位置，不過要注意你安裝的 puppeteer-core 版本需與你 browser 的版本相容，這樣才能正常運作。

• 本篇為求一切正常，直接使用 npm i puppeteer

練習 — 網頁螢幕截圖、PDF輸出。

建立 Browser instance

建立基本 Browser instance

執行這段程式碼後，會看到
(1)瀏覽器打開->(2)分頁跳轉到Google.com->(3)關閉。

網頁螢幕截圖

第13行是螢幕截圖的指令，會將目前網頁視窗上的畫面做截圖。

path :為截圖檔儲存位置，若沒有使用絕對位置則採相對位置的規則。
* Function內有提供一些選項可以設定，詳細的選項請去 這裡

執行一次後，會發現目錄下方加入了一個新的png檔，名為 “pup.png”

截圖功能呼叫

檔案與截圖畫面

網頁PDF輸出

第11行是PDF輸出指令，需要注意，只有headless模式時可以呼叫輸出PDF的功能，所以 headless 設為 true。

同樣執行後就會在目錄下多出一個PDF檔案啦
* 詳細的 PDF option 就看 -> 這裡

看到這裡是不是覺得這樣PDF輸出功能少了點什麼，輸出別人的網頁畫面有什麼意思，沒錯 ! Puppeterr 還有提供 setContent 的 Function，只要輸入 HTML 給分頁，再下載PDF，就可以由後端快速的產出你想要的PDF啦，這樣在輸出報表、文件時非常好用 ，更是將資訊留在後端處理即可。

PDF 輸出實用例子 — 小表格示範

Example for Setting html content to page

第13行組出了一串html的字串，css 與 body 都是事先寫好的，方便展示。
第14行將組好的html字串用setContect function 設定給分頁，分頁載入成功後下載PDF。

Puppeteer 依照設定的 html 內容所產生的 pdf 檔

html css

html body

小結

這篇講了Puppeteer 基本的安裝與兩項功能的操作，算是基本的認識到這款工具的有趣之處，文章的內容只有Puppeteer實際功能的一小小部分，更多細緻的設定，需要各位看官到Puppeteer的官方文件中看啦~

下一篇預計集中在爬蟲功能的探討與實作，下一篇見。

參考資料:

Puppeteer 官方文件 : 點這裡 (https://pptr.dev/)