一 Puppeteer簡介
Puppeteer.js是谷歌官方推出的一個nodejs庫洁闰，它提供了一組用來操縱Chrome的API（默認headless也就是無UI的chrome甩恼，也可以配置為有UI），有點類似于PhantomJS厉碟，但Puppeteer是Chrome官方團隊進行維護的，前景更好搀继。使用Puppeteer吟策，相當于同時具有Linux和Chrome的能力，應用場景會非常多苟翻。就爬蟲領域來說韵卤，遠比一般的爬蟲工具功能更豐富，性能分析袜瞬、自動化測試也不在話下怜俐。官方列出的主要功能如下：
- 利用網(wǎng)頁生成PDF、圖片
- 爬取SPA應用邓尤，并生成預渲染內(nèi)容（即“SSR” 服務端渲染）'
- 可以從網(wǎng)站抓取內(nèi)容
- 自動化表單提交拍鲤、UI測試、鍵盤輸入等
- 幫你創(chuàng)建一個最新的自動化測試環(huán)境（chrome）汞扎，可以直接在此運行測試用例
- 捕獲站點的時間線季稳，以便追蹤你的網(wǎng)站，幫助分析網(wǎng)站性能問題
安裝如下很簡單：
npm install puppeteer
二 輸出地圖圖片
在工程項目中澈魄，常常有導出地圖圖片保存的需求景鼠，這種需求很多時候，直接在前端canvas渲染圖片導出即可痹扇，參考：OpenLayers3關于Map Export的Canvas跨域铛漓，但很多時候，Map的Layer來源很多鲫构，有公網(wǎng)第三方網(wǎng)站的浓恶，有工程自己服務器的，并不是每個地圖服務器都支持cors操作结笨，canvas渲染常常無法使用包晰，而使用服務端請求出圖也是一種可選方案。
測試以本地的一個web頁面為準：
測試頁面.png
廢話不多說炕吸，直接上代碼：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
//登錄地圖網(wǎng)頁
await page.goto('http://localhost:63342/%E7%89%B9%E6%95%88demo/Gansu.html');
//根據(jù)頁面上下文伐憾，獲取map div的寬高
let result = await page.evaluate((divid) => {
let mapdiv=document.querySelector(`#${divid}`);
let width= parseInt(mapdiv.offsetWidth);
let height=parseInt(mapdiv.offsetHeight);
return Promise.resolve([width,height]);
}, 'map');
console.log(result);
//等待1.2秒
await sleep(1200);
//print png
await page.screenshot({
path: 'clickbd.png',
//fullPage與clip使用時互斥
//fullPage: true, //整頁輸出
//只clip出map div的范圍輸出地圖
clip:{
x:0,
y:0,
width:result[0],
height:result[1]
}
});
browser.close();
})();
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
以上代碼保存為工程中，起名叫print.js赫模，然后執(zhí)行：
node print.js
等待之后树肃，輸出結(jié)果如下：
結(jié)果.png
本文只簡單介紹下Puppeteer，可以預見瀑罗，將來會越來越火胸嘴，畢竟是chrome官方維護的庫莉钙，比同類產(chǎn)品牌子更大。
