一 Puppeteer簡介

Puppeteer.js是谷歌官方推出的一個nodejs庫，它提供了一組用來操縱Chrome的API（默認headless也就是無UI的chrome，也可以配置為有UI），有點類似于PhantomJS，但Puppeteer是Chrome官方團隊進行維護的，前景更好。使用Puppeteer，相當于同時具有Linux和Chrome的能力，應用場景會非常多。就爬蟲領域來說，遠比一般的爬蟲工具功能更豐富，性能分析、自動化測試也不在話下。官方列出的主要功能如下：

• 利用網頁生成PDF、圖片
• 爬取SPA應用，并生成預渲染內容（即“SSR” 服務端渲染）'
• 可以從網站抓取內容
• 自動化表單提交、UI測試、鍵盤輸入等
• 幫你創建一個最新的自動化測試環境（chrome），可以直接在此運行測試用例
• 捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題
  安裝如下很簡單：

npm install puppeteer

二 輸出地圖圖片

在工程項目中，常常有導出地圖圖片保存的需求，這種需求很多時候，直接在前端canvas渲染圖片導出即可，參考：OpenLayers3關于Map Export的Canvas跨域，但很多時候，Map的Layer來源很多，有公網第三方網站的，有工程自己服務器的，并不是每個地圖服務器都支持cors操作，canvas渲染常常無法使用，而使用服務端請求出圖也是一種可選方案。

測試以本地的一個web頁面為準：

測試頁面.png

廢話不多說，直接上代碼：

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    //登錄地圖網頁
    await page.goto('http://localhost:63342/%E7%89%B9%E6%95%88demo/Gansu.html');
        
    //根據頁面上下文，獲取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，然后執行：

node print.js

等待之后，輸出結果如下：

結果.png

本文只簡單介紹下Puppeteer，可以預見，將來會越來越火，畢竟是chrome官方維護的庫，比同類產品牌子更大。