👇【Puppeteer 運用(二)】👇
What can puppeteer do?
Most things that you can do manually in the browser can be done using Puppeteer! — By Puppeteer official
幾個官方提出的例子 :
- 網頁螢幕截圖、PDF輸出。
- SPA(Single-Page Application) 爬蟲 & SSR(Server-Side Rendering) 內容
- 建立UI自動化測試流程,可模擬鍵盤輸入、滑鼠點擊等行為。
- 對網站進行效能評估 …等等
這篇我們來對這第一個例子做簡單的練習~
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
執行這段程式碼後,會看到
(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 輸出實用例子 — 小表格示範
第13行組出了一串html的字串,css 與 body 都是事先寫好的,方便展示。
第14行將組好的html字串用setContect function 設定給分頁,分頁載入成功後下載PDF。
小結
這篇講了Puppeteer 基本的安裝與兩項功能的操作,算是基本的認識到這款工具的有趣之處,文章的內容只有Puppeteer實際功能的一小小部分,更多細緻的設定,需要各位看官到Puppeteer的官方文件中看啦~
下一篇預計集中在爬蟲功能的探討與實作,下一篇見。
參考資料:
Puppeteer 官方文件 : 點這裡 (https://pptr.dev/)