使用puppeteer怎么實現一個html截圖功能-創(chuàng)新互聯

使用puppeteer怎么實現一個html截圖功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯是一家專注于做網站、成都網站建設與策劃設計,安陽縣網站建設哪家好?創(chuàng)新互聯做網站,專注于網站建設十年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:安陽縣等地區(qū)。安陽縣做網站價格咨詢:18980820575

安裝

直接運行安裝命令：

npm install puppeteer

如果出現無法安裝的問題，可以使用淘寶鏡像。

puppeteer實現滑動截圖

在我 puppeteer 使用截全屏的過程中發(fā)現有些圖片無法截取到，而實際上是因為有些圖片是懶加載的，如果你沒有滑動到圖片的位置，那么這個圖片是不會加載。

現在我的方式是采用模擬瀏覽器滾動條滑動的方式滑動底部來使圖片加載出來。

代碼如下：

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

動圖如下：

puppeteer 實現 html element 截圖

在某些情況下我們只想要針對html的某個位置進行截圖而不是針對頁面截全屏。

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

代碼如下：

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
  });
  //獲取頁面Dom對象
  let body = await page.$('#cnblogs_post_body');
  //調用頁面內Dom對象的 screenshot 方法進行截圖
  await body.screenshot({
    path: '2.png'
  });
  await browser.close();
})();

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯成都網站設計公司的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文題目：使用puppeteer怎么實現一個html截圖功能-創(chuàng)新互聯
網頁URL：http://www.muchs.cn/article38/dhjssp.html

成都網站建設公司_創(chuàng)新互聯，為您提供App設計、微信公眾號、ChatGPT、網站策劃、網站營銷、網站設計公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯