Puppeteer + Nodejs 通用全屏网页截图方案(二)常用参数实现

2023-10-08 21:51:25

在上一篇文章中，我们介绍了Puppeteer + Nodejs实现通用全屏网页截图方案的基本方法。在本文中，我们将继续介绍一些常用的参数和其实现。

1. 指定截图尺寸

默认情况下，Puppeteer会根据页面的实际大小进行截图。但是，我们也可以通过设置viewport参数来指定截图的尺寸。例如，以下代码将截图的尺寸设置为600px宽、800px高：

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 600, height: 800});
await page.screenshot({path: 'screenshot.png'});

2. 滚动截图

有时候，我们可能希望截图一个比当前视窗更大的页面。这时，我们可以使用scroll方法来滚动页面，然后截图。例如，以下代码将截图一个比当前视窗更大的页面，并将其保存为screenshot.png文件：

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 600, height: 800});
await page.scrollBy(0, 1000);
await page.screenshot({path: 'screenshot.png'});

3. 等待页面加载完成

在某些情况下，我们可能希望在页面加载完成后再进行截图。这时，我们可以使用waitForNavigation方法来等待页面加载完成。例如，以下代码将在页面加载完成后截图，并将其保存为screenshot.png文件：

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 600, height: 800});
await page.waitForNavigation();
await page.screenshot({path: 'screenshot.png'});

4. 自定义截图格式

默认情况下，Puppeteer会以PNG格式保存截图。但是，我们也可以通过设置type参数来指定截图的格式。例如，以下代码将截图保存为JPEG格式：

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 600, height: 800});
await page.screenshot({path: 'screenshot.jpg', type: 'jpeg'});

5. 截取元素的截图

有时我们可能只想截取某个元素的截图。这时，我们可以使用elementHandle.screenshot()方法来截取元素的截图。例如，以下代码将截取#my-element元素的截图，并将其保存为screenshot.png文件：

const browser = await puppeteer.launch();
const page = await browser.newPage();
const elementHandle = await page.$('#my-element');
await elementHandle.screenshot({path: 'screenshot.png'});