使用nodejs进行截图

创建一个空文件夹

初始化项目

npm init -y

下载插件

yarn add puppeteer

根目录下创建app.js放入以下内容：

const puppeteer = require('puppeteer');

(async () => {
  // 启动 Puppeteer 并创建一个新浏览器实例
  // const browser = await puppeteer.launch(); // 会在后台自动运行截图，不会打开浏览器
  const browser = await puppeteer.launch({headless: false}); // headless参数为false则打开浏览器
  // 创建一个新页面
  const page = await browser.newPage();
  await page.setViewport({ width: 414, height: 896 }); // 打开的浏览器尺寸（淫威有的页面适配web有的适配移动端，尺寸不一样）
  // 导航到目标网页
  await page.goto('https://saas.takehr.cn/wxshare/#/coachDailyPaper/1387187/0/0');
  // 等待页面完全加载
  // 截取网页截图
  await page.screenshot({ path: 'example.png',fullPage: true });
  // 关闭浏览器
  await browser.close();
})();

运行app.js,当前项目下打开终端运行如下命令

node .\app.js

然后就会自动打开浏览器访问上述页面，然后截图完毕自动关闭浏览器，在当前项目下会生成一个example.png文件，就是截图的图片

正常情况下，都是使用下面这段代码进行截图，适配所有长图和短图情况，而且也保证了清晰度

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  // 设置视口，deviceScaleFactor 影响清晰度
  // 下面这个可以根据ui尺寸设计
  // 打开的窗口大小
  await page.setViewport({ width: 750, height: 1624, deviceScaleFactor: 2 });

  // 导航到目标网页
  await page.goto('https://saas.takehr.cn/wxshare/#/otfresult/7593667/708626');

  // 等待页面加载完成
  await new Promise(resolve => setTimeout(resolve, 500)); // 等待 0.5 秒

  // 获取页面内容高度并调整视口
  const bodyHandle = await page.$('body');
  const boundingBox = await bodyHandle.boundingBox();
  await bodyHandle.dispose();
  
  // 这个设置截图的图片的宽高大小
  await page.setViewport({
    width: 750,
    height: Math.ceil(boundingBox.height),
    deviceScaleFactor: 2
  });

  // 截取长页面截图
  await page.screenshot({ path: 'example.png' });

  // 关闭浏览器
  await browser.close();
})();