欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Puppeteer之大屏批量截图

程序员文章站 2024-01-05 21:09:46
    事情的起因是客户三天两头的要求让我们给大屏截图,一定要最新的数据。所以我就自告奋勇研究了一下。     puppeteer是一款headless浏览器,由谷歌官方维护。先看看 "puppeteer入门" 。思路是 ......

    事情的起因是客户三天两头的要求让我们给大屏截图,一定要最新的数据。所以我就自告奋勇研究了一下。

    puppeteer是一款headless浏览器,由谷歌官方维护。先看看 。思路是先打开所有链接,然后设置最长的等待时间,最后进行截图。(13版本puppeteer跟前一版api有挺多不同,headless设置为false,测试中headless为true不支持webgl绘制)。实现代码如下

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();
})();

Puppeteer之大屏批量截图

Puppeteer之大屏批量截图
Puppeteer之大屏批量截图