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();
})();
發佈了210 篇原創文章 · 獲贊 33 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章