如何使用 Puppeteer 进行页面截图Puppeteer 提供了一种高层次的 API 来控制无头 Chrome 或

如何使用 Puppeteer 进行页面截图

Puppeteer 是一个由 Google 开发的 Node.js 库，它提供了一种高层次的 API 来控制无头 Chrome 或 Chromium 浏览器。这个强大的工具常用于网页抓取、自动化测试以及生成 PDF 和屏幕截图。本文将介绍如何使用 Puppeteer 进行网页截图的基本步骤。

环境准备

在开始之前，请确保你的电脑上已经安装了 Node.js。如果尚未安装，可以访问 Node.js 官网 下载并安装。

接下来，我们需要安装 Puppeteer。在一个新的项目目录中，打开终端，然后运行以下命令：

npm init -y
npm install puppeteer

这个命令会安装 puppeteer 并创建一个基础的 package.json 文件。

编写代码

我们将创建一个名为 screenshot.js 的文件，并在其中编写截图代码。代码如下：

const puppeteer = require('puppeteer');

(async () => {
  // 启动 browser
  const browser = await puppeteer.launch({
      
  });
  
  // 创建一个新的页面
  const page = await browser.newPage({
        // 启用无头模式  
        headless: true,
        args: [
            '--no-sandbox',
            // error when launch(); Failed to load libosmesa.so
            '--disable-gpu',
            // freeze when newPage() 
            '--single-process',
            "--proxy-server='direct://'",
            '--proxy-bypass-list=*',
            '--disable-dev-shm-usage', // The /dev/shm partition is too small in certain VM environments, causing Chrome to fail or crash
            '--disable-setuid-sandbox', // Disable the setuid sandbox (Linux only).
            '--no-first-run', // Skip First Run tasks, whether or not it's actually the First Run. Overridden by kForceFirstRun. This does not drop the First Run sentinel and thus doesn't prevent first run from occuring the next time chrome is launched without this flag
            '--no-zygote',
        ]
    }
);
  
  // 跳转到指定网址
  await page.goto('https://example.com');
  
  // 截取整个页面的图像，并保存到本地
  await page.screenshot({ path: 'example.png', fullPage: true });
  
  // 关闭 browser
  await browser.close();
})();

代码解析

1. 引入 Puppeteer: const puppeteer = require('puppeteer'); 这行代码用于引入 Puppeteer 库。

2. 启动浏览器: const browser = await puppeteer.launch(); 启动无头浏览器实例。

3. 创建新页面: const page = await browser.newPage(); 创建一个新的浏览器标签页。

4. 跳转到网址: await page.goto('https://example.com'); 让浏览器访问目标网页。

5. 截图: await page.screenshot({ path: 'example.png', fullPage: true }); 该函数用于截取页面并存储为名为 example.png 的文件，设置 fullPage: true 以确保截取整个页面。

6. 关闭浏览器: await browser.close(); 关闭浏览器实例，释放资源。

运行代码

在终端中运行以下命令以执行脚本：

node screenshot.js

运行后，脚本会访问 https://example.com 并在项目文件夹中生成 example.png 文件，展示了该网页的完整截图。

小提示

• 你可以通过修改 page.goto() 方法中的 URL 来截取其他网页的截图。

• 可以通过调整 screenshot 函数中的参数来改变截图的效果。例如，使用 clip 属性来截取页面的特定区域：

  await page.screenshot({
    path: 'example-part.png',
    clip: { x: 0, y: 0, width: 600, height: 400 }
  });
  

• 若需要调试，可以将 launch() 方法中的 headless 属性设置为 false，以便在浏览器中查看自动化过程：

  const browser = await puppeteer.launch({ headless: false });
  

小结

Puppeteer 是一种非常强大的工具，可以轻松地进行网页截图。通过上述步骤，你可以快速上手并开始自动化网页测试和抓取。