几行代码搭建一个网页转 PDF 的服务

搭建一个网页转 pdf 的服务实际上只需几行代码，转给有需要的同学，正文如下。

原文链接: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();
})();

参考资料

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