Web截图方案-puppeteer的使用

Web 截图方案有哪些？

1、html2canvas

这是一个使用人数比较多的库，用于将 DOM 转换为 canvas，从而利用 canvas 的 API 生成图片。优点是：纯前端实现，无需后端支持；缺点是：复杂页面或 DOM 的转换效果不理想，另外对应用到 DOM 的样式有一些限制。详情参见：https://github.com/niklasvh/html2canvas/

2、dom-to-image

该库的原理是利用 svg 的 foreignObject 标签来包裹 html 内容，从而生成一个 data url。详情参见：https://github.com/tsayen/dom-to-image

3、PhantomJS

PhantomJS 是一个无界面的可执行 JavaScript 脚本的网页浏览器。它可以运行在 Windows、MacOS、Linux 和 FreeBSD 系统上。该库目前已不再维护，详情参见：https://phantomjs.org/

4、SlimerJS

SlimerJS 类似与 PhatomJS，只是内核基于火狐的浏览器引擎 Gecko，而不是 Webkit。
详情参见：https://slimerjs.org/

5、Puppeteer

Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。详情参见：https://github.com/puppeteer/puppeteer/

前两种是前端实现方案，后三种是后端实现方案。综合各方案优缺点，这里推荐使用 Puppeteer，以下简单介绍其用法。

puppeteer 的使用

安装

1	npm install puppeteer

如果出现如下错误：

ERROR: Failed to download Chromium r686378! Set “PUPPETEER_SKIP_CHROMIUM_DOWNLOAD” env variable to skip download.

这是由于安装 puppeteer 时，会自动下载其依赖的 Chromium 版本，下载失败时就会报错，可以根据提示设置环境变量跳过下载：

1	npm config set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 1

手动下载 Chromium

1、打开/node_modules/puppeteer/package.json 查看安装的 puppeteer 依赖的 Chromium 版本：

1
2
3

"puppeteer": {
  "chromium_revision": "686378"
}

2、访问https://npm.taobao.org/mirrors/chromium-browser-snapshots/，下载符合当前操作系统类型版本。

3、将下载后的 zip 包解压后放到/node_modules/puppeteer/.local-chromium/{操作系统平台-Chromium 版本}/目录下，如果目录.local-chromium 和{操作系统平台-Chromium 版本}不存在则手动创建。

例如操作系统为 Windows 64 位，则{操作系统平台-Chromium 版本}目录名为：win64-686378。

截图

以打开百度首页进行截图为例：

const puppeteer = require('puppeteer');

(async () => {
  // 创建一个浏览器实例
  const browser = await puppeteer.launch({
    headless: true,
  });

  // 创建一个新的页面实例
  const page = await browser.newPage();
  // 设置页面视口宽高
  await page.setViewport({
    width: 1920,
    height: 1280,
  });
  // 加载url
  await page.goto('https://baidu.com');
  // 截图保存到本地
  await page.screenshot({
    path: 'D:/baidu.png',
  });
})();

Puppeteer 的更多 api 可参见其文档：https://github.com/puppeteer/puppeteer/blob/v9.1.1/docs/api.md。

参考文档：