Puppeteer之大屏批量截圖

??事情的起因是客戶三天兩頭的要求讓我們給大屏截圖,一定要最新的數(shù)據(jù)。。。所以我就自告奮勇研究了一下。
??puppeteer是一款headless瀏覽器,由谷歌官方維護。先看看puppeteer入門。思路是先打開所有鏈接,然后設置最長的等待時間,最后進行截圖。(13版本puppeteer跟前一版api有挺多不同,headless設置為false,測試中headless為true不支持webgl繪制)。實現(xiàn)代碼如下

const puppeteer = require('puppeteer');
const fs = require('fs');
(async() => {
    const config = {
        args: [
            '--use-gl'
        ],
        headless: false
    }
    const browser = await puppeteer.launch(config);
    var info = [
        { url: 'https://developers.arcgis.com/javascript/latest/sample-code/visualization-point-styles/live/index.html', name: "a.jpeg" },
        { url: 'https://developers.arcgis.com/javascript/latest/sample-code/layers-custom-elevation-thematic/live/index.html', name: "b.jpeg" },
        { url: 'https://developers.arcgis.com/javascript/latest/sample-code/layers-imagery-pixelvalues/live/index.html', name: "c.jpeg" }

    ]
    var that = this;
    var length = info.length;
    var a = [];
    for (let j = 0; j < length; j++) {
        var page = await browser.newPage();
        await page.setViewport({ width: 4800, height: 1200 })
        await page.goto(info[j].url);
        a.push(page)
    }
    await a[0].waitFor(120 * 1000);
    for (i = 0; i < length; i++) {
        var item = info[i];
        var url = item.url;
        var name = item.name;
        fs.exists(name, function(exists) {
            console.log(exists ? fs.unlinkSync(name) : "no such file");
        });
        try {
            await a[i].screenshot({ path: name });
            console.log(name);
        } catch (e) {
            console.log(e)
        }
    }
    await browser.close();
})();
代碼啟動
截圖結(jié)果

截圖結(jié)果

截圖結(jié)果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,979評論 25 709
  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標簽 ②:HTML5 ...
    GreenHand1閱讀 4,878評論 2 32
  • 一、canvas簡介 1.1 什么是canvas?(了解) 是HTML5提供的一種新標簽 Canvas是一個矩形區(qū)...
    Looog閱讀 4,035評論 3 40
  • 本系列所有文章目錄[http://www.itdecent.cn/p/8fa8eb8e0cdc] 本文將介紹如何...
    handyTOOL閱讀 3,146評論 0 1
  • 《無極》的課程體系 第一部分,認識高我 第二部分,拿掉小我 第三部分,去掉高我 第四部分,來到無極 第五部分,下載...
    簡寧寶兒閱讀 564評論 0 0

友情鏈接更多精彩內(nèi)容