使用 Puppeteer 在 Node 环境生成 HTML 截图

PuppeteerChrome 团队维护的一个无界面 Chrome 工具,我们可以利用它在 NodJS 环境生成网页截图


创建测试目录

1
2
3
4
mkdir node_images
cd node_images
touch index.js
npm init

安装

通过 npm 或者 yarn 在项目内安装 puppeteer

1
2
npm i puppeteer
# or "yarn add puppeteer"


生成网页截图

1
2
3
4
5
6
7
8
9
10
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.baidu.com');
await page.screenshot({path: 'baidu.png'}); // path 指定了图片保存路径

await browser.close();
})();

执行上述代码 node index.js, 会在当前目录下生成名为 baidu.png 的图片

通过 setViewport 方法可以对视窗进行配置

1
2
3
4
5
await page.setViewport({
width: 345,
height: 345,
deviceScaleFactor: 2
});

页面内容也可以是 HTML 字符串

1
await page.setContent('<html><div> ABC </div></html>')

如果想得到截图内容(如 base64)而不是保存图片到目录中,可以通过 screenshort 方法的返回值得到

1
2
3
4
const result = await page.screenshot({
encoding: "base64"
});
console.log(result)

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2020/09/09/generate-html-screenshot-by-puppeteer/

版权声明: 转载请注明出处

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

Mapbox 不再支持经典样式