puppeteer 指定dom截圖

原文鏈接: puppeteer 指定dom截圖

dom轉圖片, 目前看來兼容性好的就是dom2img了, 可以在純前端截圖, 然後就是服務端用puppeteer截圖, 可以做到和看到的一致

 

 

 

dom截圖不能添加全屏標誌, 會報錯

    fullPage: true

const puppeteer = require("puppeteer");
const waitTime = (n) => new Promise((r) => setTimeout(r, n));
const main = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://www.bilibili.com/");
  await page.setViewport({
    width: 1920,
    height: 1080,
  });
  const timePromise = waitTime(5000);
  // 等待十秒, 或者所有圖片加載完畢
  await Promise.race([timePromise]);
  const el = await page.$('.first-screen');

  await el.screenshot({
    path: "example-full2.png",
  });
  await browser.close();
};
main();