几行代码实现网页转pdf和整页截图

原文链接:https://www.xbext.com/docs/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