原文链接：http://doc.xbext.com/devopt/using-puppeter-convert-webpage-to-pdf-and-fullpage-screenshot/
最近需要为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 一起正常工作。
//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 格式。
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();
})();
生成整页网页截图
下面代码展示了如何模仿手机作为请求，并且生成整个网页的截图
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