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

Node
, , ,

做法

建立專案。

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,
    },
  });
}

程式碼

參考資料