原文链接: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();
})();
相关问题
运行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
网友评论