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(); })();
上一篇: PHP 更高效的字符长度判断方法