Puppeteer获取Web页面截图

准备在新的项目中使用Puppeteer替代PhantomJS,原因是:

实现的截图效果:

下面分别给出安装步骤执行代码

安装步骤#

在Ubuntu Server 16.04版本下安装。

安装Puppeteer依赖的环境:

1
sudo apt-get install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

安装Puppeteer,前提是已经安装了nodenpm,我的Node.js版本是9.11.1

1
npm i puppeteer

执行代码#

以下代码将截取我的网站首页,实现上面图的效果

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

(async () => {
const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
const page = await browser.newPage();
await page.goto('https://marshal.ohtly.com');
await page.screenshot({path: 'example.png'});

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

执行这段代码即可。

中文问题#

其实上述配置和代码,中文将不能正常显示,中文显示为方框。

解决办法是安装中文字体:

1
sudo apt-get install -y --force-yes --no-install-recommends fonts-wqy-microhei ttf-wqy-zenhei