在 Node 專案使用 Puppeteer 生成網頁截圖

做法

新增專案。

1
npm init

安裝依賴套件。

1
npm i puppeteer

新增 main.js 檔:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const puppeteer = require('puppeteer');

(async () => {
// 啟動瀏覽器
const browser = await puppeteer.launch();
// 開啟新頁
const page = await browser.newPage();
// 前往網站
await page.goto('https://example.com');
// 截圖
await page.screenshot({ path: 'example.png' });
// 關閉瀏覽器
await browser.close();
})();

如果要將特定元素隱藏,可以使用 page.evaluate() 方法執行一段程式:

1
2
3
await page.evaluate(() => {
document.querySelector('#some-button').style.display = 'none';
});

也可以使用選擇器獲取特定節點並進行截圖:

1
2
3
4
5
6
7
8
9
10
11
12
const ele = await page.$('#my-card');
if (ele) {
const box = await ele.boundingBox();
await page.screenshot({
clip: {
x: box.x,
y: box.y,
width: box.width,
height: box.height,
},
});
}

程式碼

參考資料