如何在 Puppeteer 中截屏?

使用 Puppeteer 截屏非常简单。只需设置浏览器的视窗并使用 page.screenshot() 方法即可。下文介绍如何捕获 Bright Data 主页的屏幕截图:

      const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Set the viewport dimensions
  await page.setViewport({ width: 1920, height: 1080 });

  // Navigate to Bright Data's home page
  await page.goto('https://brightdata.com');

  try {
    // Capture and save the screenshot
    await page.screenshot({ path: 'brightdata_homepage.jpg' });
  } catch (err) {
    console.error(`Error capturing screenshot: ${err.message}`);
  } finally {
    await browser.close();
    console.log('Screenshot captured successfully');
  }
})();
    

在 Puppeteer 中截屏的步骤:

  1. 安装 Puppeteer:确保您的项目中已安装 Puppeteer。npm install puppeteer
  2. 启动浏览器:使用 puppeteer.launch() 启动新的浏览器实例。
  3. 打开新页面:使用 browser.newPage() 打开新页面。
  4. 设置视窗:使用 page.setViewport({ width, height }) 设置视窗尺寸。
  5. 导航到 URL:使用 page.goto('your-website-url') 导航到所需的 URL。
  6. 捕获屏幕截图:使用 page.screenshot({ path: 'your-file-name.jpg' }) 捕获并保存屏幕截图。
  7. 处理错误:将屏幕截图逻辑包裹在 try-catch 块中以处理任何错误。
  8. 关闭浏览器:使用 browser.close() 关闭浏览器实例。

此方法可确保使用 Puppeteer 快速可靠地捕获网页的屏幕截图。对于更高级的需求,Bright Data 的 Puppeteer 网页抓取浏览器可自动绕过网站封锁,处理验证码求解和浏览器指纹识别。使用单一 API 和 Bright Data 强大的网络轻松扩展,节省自行构建基础架构的成本。

想要立即开始使用?