puppeteer實(shí)現(xiàn)html截圖的示例代碼

更新時(shí)間：2019年01月10日 08:59:17 作者：morethink

通過(guò)Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來(lái)進(jìn)行UI Test或者作為爬蟲訪問頁(yè)面來(lái)收集數(shù)據(jù),這篇文章主要介紹了puppeteer實(shí)現(xiàn)截圖的示例代碼，感興趣的可以了解一下

puppeteer是谷歌官方出品的一個(gè)通過(guò) DevTools 協(xié)議控制 headless Chrome 的Node庫(kù)?？梢酝ㄟ^(guò)Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來(lái)進(jìn)行UI Test或者作為爬蟲訪問頁(yè)面來(lái)收集數(shù)據(jù)。

安裝

直接運(yùn)行安裝命令：

npm install puppeteer

如果出現(xiàn)無(wú)法安裝的問題，可以使用淘寶鏡像。

puppeteer實(shí)現(xiàn)滑動(dòng)截圖

在我 puppeteer 使用截全屏的過(guò)程中發(fā)現(xiàn)有些圖片無(wú)法截取到，而實(shí)際上是因?yàn)橛行﹫D片是懶加載的，如果你沒有滑動(dòng)到圖片的位置，那么這個(gè)圖片是不會(huì)加載。

現(xiàn)在我的方式是采用模擬瀏覽器滾動(dòng)條滑動(dòng)的方式滑動(dòng)底部來(lái)使圖片加載出來(lái)。

代碼如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
  await page.setViewport({
    width: 1200,
    height: 800
  });

  await autoScroll(page);

  await page.screenshot({
    path: '1.png',
    fullPage: true
  });

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


function autoScroll(page) {
  return page.evaluate(() => {
    return new Promise((resolve, reject) => {
      var totalHeight = 0;
      var distance = 100;
      var timer = setInterval(() => {
        var scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;
        if (totalHeight >= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    })
  });
}

動(dòng)圖如下：

puppeteer 實(shí)現(xiàn) html element 截圖

在某些情況下我們只想要針對(duì)html的某個(gè)位置進(jìn)行截圖而不是針對(duì)頁(yè)面截全屏。

puppeteer提供了ElementHandle.screenshot 方法，該方法參數(shù)和page.screenshot 一樣。而ElementHandle 對(duì)象是頁(yè)面內(nèi)的Dom對(duì)象?？梢詭椭覍?duì) html element進(jìn)行截圖。這樣的話你想截取頁(yè)面的哪部分就截取頁(yè)面的哪部分。

代碼如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
  await page.setViewport({
    width: 1200,
    height: 800
  });
  //獲取頁(yè)面Dom對(duì)象
  let body = await page.$('#cnblogs_post_body');
  //調(diào)用頁(yè)面內(nèi)Dom對(duì)象的 screenshot 方法進(jìn)行截圖
  await body.screenshot({
    path: '2.png'
  });
  await browser.close();
})();

參考文檔：

https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#elementhandlescreenshotoptions

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。