puppeteer调研--生成页面的屏幕截图和PDF

最近工作需要用到puppeteer,做一个学习笔记。
概念
Puppeteer是一个Node库,它提供了高级API来通过DevTools协议控制Chrome或Chromium。 Puppeteer默认情况下无头运行,但可以配置为运行完整(无头)的Chrome或Chromium。
主要应用

  1. 生成页面的屏幕截图和PDF。
  2. 抓取SPA(单页应用程序)并生成预渲染的内容(即“ SSR”(服务器端渲染))。
  3. 自动执行表单提交,UI测试,键盘输入等。
  4. 创建最新的自动化测试环境。 使用最新的JavaScript和浏览器功能,直接在最新版本的Chrome中运行测试。
  5. 捕获站点的时间线跟踪以帮助诊断性能问题。
  6. 测试Chrome扩展程序。

调研作用:生成该页面的屏幕截图和PDF
截屏的例子:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

创建example.js文件,作用是将https://example.com的页面截屏并生成图片example.png
使用命令node example.js可以获取图片
参数:
默认的截取大小是800×600px(可能非全图可用参数设置)
是否全页面:fullPage:true
调整大小:大小可以调整,示例如下,将大小调整为1200x800px
调整图片质量:quality,针对png图片不可调整
图片格式:根据文件后缀指定,如png,jpeg

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({
  width: 1200,
  height: 800,
  deviceScaleFactor: 1,
  });
  await page.goto('https://example.com');
  await page.screenshot({path: 'example3.jpeg',fullPage:true,quality: 50});

  await browser.close();
})();

更全面的使用

const puppeteer = require('C:/Program Files/nodejs/node_modules/puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: true, args:['--no-sandbox']});
    const page = await browser.newPage();
	await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36');
	await page.setViewport({width: 1200,height: 800});
	await page.goto('https://www.baidu.com',{referer:'https://blog.csdn.net/hello_bravo_'});
	await page.screenshot({path: 'example.jpeg',quality: 50});
     await browser.close();
})();

若是需要等待页面加载完毕可以用如下代码

const puppeteer = require('/data/node_modules/puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: true, args:['--no-sandbox']});
    const page = await browser.newPage();
	await page.setViewport({width: 750,height: 800});
	await page.goto(url,{waitUntil:'networkidle2'});
	await page.screenshot({path: 'example.jpeg',quality: 100, fullPage: true});     
	await browser.close();
})();

你可能感兴趣的:(puppeteer调研--生成页面的屏幕截图和PDF)