原文鏈接:https://www.xbext.com/docs/devopt/using-puppeter-convert-webpage-to-pdf-and-fullpage-screenshot/
最近需要為x瀏覽器 提供一個網(wǎng)頁轉(zhuǎn)PDF的服務(wù)，鑒于X瀏覽器定位是一個簡潔輕便的手機瀏覽器產(chǎn)品，所以打算在服務(wù)端實現(xiàn)這一功能，同時為了更好的為X瀏覽器客戶端服務(wù)，所以準(zhǔn)備自己嘗試搭建這么一套服務(wù)。去年的時候曾經(jīng)看到過關(guān)于Puppeteer的相關(guān)文章，知道通過這個產(chǎn)品可以實現(xiàn)網(wǎng)頁轉(zhuǎn)pdf以及生成整頁截圖。這篇文章用來記錄如何使用這組件來搭建一個網(wǎng)頁轉(zhuǎn)pdf的服務(wù)。
什么是Puppeteer
Puppeteer 是由GoogleChrome團隊維護的一套基于NodeJs的API用于操控HeadLess Chrome 。headless chrome其實是一個沒有UI界面的Chrome瀏覽器，除此之外幾乎和真正的Chrome沒有差別。這時候你可能會奇怪沒有界面的Chrome怎么用?。渴堑膶τ谄胀ㄓ脩魜碇vHeadless Chrome確實無法使用，但是對于一些自動化測試的場景使用Headless Chrome就太方便了。我們只要通過命令行就可以對Chrome進行操控完成普通瀏覽器所用使用場景，打開頁面，填寫表單，點擊按鈕，甚至模擬鼠標(biāo)及觸屏，都完全不在話下。
Puppeteer提供了一套完備的API使我們我們可以方便的操控Chrome，我們通過UI界面可以完成的操作都可以通過Puppeteer來實現(xiàn)。
下面介紹如何安裝Puppeteer以及使用Puppeteer提供整頁截圖和生成pdf文件。
在Linux環(huán)境下部署Puppeteer
為了安裝部署方便，我們選擇ubutun 18.04作為后臺服務(wù)，在這之前我需要先安裝NodeJs運行環(huán)境，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
轉(zhuǎn)換網(wǎng)頁到pdf格式
下面的代碼展示了使用Puppeteer如何把網(wǎng)頁轉(zhuǎn)換為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();
})();
生成整頁網(wǎng)頁截圖
下面代碼展示了如何模仿手機作為請求，并且生成整個網(wǎng)頁的截圖
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文件并且控制圖標(biāo)質(zhì)量
//await page.screenshot({path: 'myscreeshot.jpg',fullPage: true,quality: 80});
await browser.close();
})();
相關(guān)問題
運行puppeteer腳本時候無法啟動Chrome ,提示如下錯誤
chrome-linux/chrome: error while loading shared libraries: libasound.so.2
安裝缺失的庫即可
sudo apt-get install libasound2
無法渲染中文
生成pdf或截圖的時候，中文字符顯示為一個個小方塊，是因為缺失中文字體文件，導(dǎo)致chromium無法正常渲染，使用下面的命令安裝即可.
sudo apt-get install language-pack-zh*
sudo apt-get install chinese*
參考資料
https://developers.google.com/web/updates/2017/04/headless-chrome
