使用Puppeteer提供网页转pdf及整页截图服务

最近需要为x浏览器 提供一个网页转PDF的服务,鉴于X浏览器定位是一个简洁轻便的手机浏览器产品,所以打算在服务端实现这一功能,同时为了更好的为X浏览器客户端服务,所以准备自己尝试搭建这么一套服务。去年的时候曾经看到过关于Puppeteer的相关文章,知道通过这个产品可以实现网页转pdf以及生成整页截图。这篇文章用来记录如何使用这组件来搭建一个网页转pdf的服务。

什么是Puppeteer

Puppeteer 是由GoogleChrome团队维护的一套基于NodeJs的API用于操控HeadLess Chrome 。headless chrome其实是一个没有UI界面的Chrome浏览器,除此之外几乎和真正的Chrome没有差别。这时候你可能会奇怪没有界面的Chrome怎么用啊?是的对于普通用户来讲Headless Chrome确实无法使用,但是对于一些自动化测试的场景使用Headless Chrome就太方便了。我们只要通过命令行就可以对Chrome进行操控完成普通浏览器所用使用场景,打开页面,填写表单,点击按钮,甚至模拟鼠标及触屏,都完全不在话下。

Puppeteer提供了一套完备的API使我们我们可以方便的操控Chrome,我们通过UI界面可以完成的操作都可以通过Puppeteer来实现。

下面介绍如何安装Puppeteer以及使用Puppeteer提供整页截图和生成pdf文件。

在Linux环境下部署Puppeteer

为了安装部署方便,我们选择ubutun 18.04作为后台服务,在这之前我需要先安装NodeJs运行环境,Puppeteer的一些最新特性需要在Node v7.6.0 或更高版本中才被支持。所以我们选择安装NodeJs的8.x版本。

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

安装Puppeteer

mkdir puppeteer-demo
cd puppeteer-demo
npm i  puppeteer

安装的过程中会自动下载HeadlessChrom, 完整安装后我们可以通过下面的脚本测试puppeteer 是否可以和HeadlessChrom一起正常工作。

1
2
3
4
5
6
7
//version.js
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();

运行脚本

node verison.js

工作正常的话会显示headless chromed的版本号

HeadlessChrome/79.0.3945.0

转换网页到pdf格式

下面的代码展示了使用Puppeteer如何把网页转换为pdf格式.

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

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

await page.goto('https://www.xbext.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'page.pdf', format: 'A4'});

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

生成整页网页截图

下面代码展示了如何模仿手机作为请求,并且生成整个网页的截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
let page = await browser.newPage();
const userAgent = "Mozilla/5.0 (Linux; Android 8.1.0; MI 8 Build/OPM1.171019.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/62.0.3202.84 Mobile Safari/537.36";
page.setUserAgent(userAgent);

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

await page.setViewport({ width: 480, height: 800,isMobile: true});

await page.goto('https://www.xbext.com',{waitUntil: 'networkidle2'});

await page.screenshot({path: 'myscreeshot.png',fullPage: true});
//如图片过大可以通过生成.jpg文件并且控制图标质量
//await page.screenshot({path: 'myscreeshot.jpg',fullPage: true,quality: 80});
await browser.close();
})();

相关问题

运行puppeteer脚本时候无法启动Chrome ,提示如下错误

chrome-linux/chrome: error while loading shared libraries: libasound.so.2

安装缺失的库即可

sudo apt-get install libasound2

无法渲染中文

生成pdf或截图的时候,中文字符显示为一个个小方块,是因为缺失中文字体文件,导致chromium无法正常渲染,使用下面的命令安装即可.

sudo apt-get install language-pack-zh*
sudo apt-get install chinese*

参考资料

https://developers.google.com/web/updates/2017/04/headless-chrome