原文鏈接:https://www.xbext.com/docs/devopt/using-puppeter-convert-webpage-to-pdf-and-fullpage-screenshot/
最近需要為x瀏覽器 提供一個(gè)網(wǎng)頁轉(zhuǎn)PDF的服務(wù)，鑒于X瀏覽器定位是一個(gè)簡(jiǎn)潔輕便的手機(jī)瀏覽器產(chǎn)品蚜锨，所以打算在服務(wù)端實(shí)現(xiàn)這一功能，同時(shí)為了更好的為X瀏覽器客戶端服務(wù)苫幢，所以準(zhǔn)備自己嘗試搭建這么一套服務(wù)岔霸。去年的時(shí)候曾經(jīng)看到過關(guān)于Puppeteer的相關(guān)文章趋距，知道通過這個(gè)產(chǎn)品可以實(shí)現(xiàn)網(wǎng)頁轉(zhuǎn)pdf以及生成整頁截圖月劈。這篇文章用來記錄如何使用這組件來搭建一個(gè)網(wǎng)頁轉(zhuǎn)pdf的服務(wù)呜袁。
什么是Puppeteer
Puppeteer 是由GoogleChrome團(tuán)隊(duì)維護(hù)的一套基于NodeJs的API用于操控HeadLess Chrome 敌买。headless chrome其實(shí)是一個(gè)沒有UI界面的Chrome瀏覽器，除此之外幾乎和真正的Chrome沒有差別阶界。這時(shí)候你可能會(huì)奇怪沒有界面的Chrome怎么用胺怕琛？是的對(duì)于普通用戶來講Headless Chrome確實(shí)無法使用荐操，但是對(duì)于一些自動(dòng)化測(cè)試的場(chǎng)景使用Headless Chrome就太方便了。我們只要通過命令行就可以對(duì)Chrome進(jìn)行操控完成普通瀏覽器所用使用場(chǎng)景珍策，打開頁面托启，填寫表單，點(diǎn)擊按鈕攘宙，甚至模擬鼠標(biāo)及觸屏屯耸，都完全不在話下。
Puppeteer提供了一套完備的API使我們我們可以方便的操控Chrome蹭劈，我們通過UI界面可以完成的操作都可以通過Puppeteer來實(shí)現(xiàn)疗绣。
下面介紹如何安裝Puppeteer以及使用Puppeteer提供整頁截圖和生成pdf文件。
在Linux環(huán)境下部署Puppeteer
為了安裝部署方便铺韧，我們選擇ubutun 18.04作為后臺(tái)服務(wù)多矮，在這之前我需要先安裝NodeJs運(yùn)行環(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
安裝的過程中會(huì)自動(dòng)下載HeadlessChrom, 完整安裝后我們可以通過下面的腳本測(cè)試puppeteer 是否可以和HeadlessChrom一起正常工作。
//version.js
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();
運(yùn)行腳本
node verison.js
工作正常的話會(huì)顯示headless chromed的版本號(hào)
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)頁截圖
下面代碼展示了如何模仿手機(jī)作為請(qǐng)求料仗，并且生成整個(gè)網(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)問題
運(yùn)行puppeteer腳本時(shí)候無法啟動(dòng)Chrome ,提示如下錯(cuò)誤
chrome-linux/chrome: error while loading shared libraries: libasound.so.2
安裝缺失的庫即可
sudo apt-get install libasound2
無法渲染中文
生成pdf或截圖的時(shí)候湾盗，中文字符顯示為一個(gè)個(gè)小方塊，是因?yàn)槿笔е形淖煮w文件立轧，導(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
