使用puppeteer实现网页截图-iframe截图

演示环境node-v18.17.0且安装好puppeteer，npm i puppeteer --global

1、开启chrome托管模式允许远程调试
"C:\Users\dede\AppData\Local\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9200 --remote-debugging-address=127.0.0.1

检查监听端口是否正常

netstat -ano|findstr 9200

此种模拟可用于需要登录的，且需要使用诸如手机验证码之类的网站，如无复杂登录模式仅为账号和密码，则可直接模拟登录后截图

2、使用puppteer模拟使用用户名密码登录百度统计baidu.js
2.1、执行流程
  • 打开浏览器（不需要使用已登录cookie，因百度统计不需要复杂验证，可直接使用账号和密码登录）
  • 打开一个新页面
  • 设置页面大小（最大化-可设置为屏幕最大分辨率）
  • 打开页面并等待完成
  • 点击“登录”打开登录页
  • 在弹出的登录框中选择“百度账号”
  • 录入账号和密码后登录
  • 成功后截图
2.2、代码
const puppeteer = require('puppeteer');
const moment = require('moment');

(async () => {
  //打开的浏览器，headless可改为true直接后台运行，--start-maximized表示窗口最大化
  const browser = await puppeteer.launch({headless: false,args: ['--start-maximized']});
  //打开新页面
  const page = await browser.newPage();
  //设置页面大小
  await page.setViewport({width: 1920, height: 1080});
  
  //打开页面并等待完成
  await page.goto("https://tongji.baidu.com");
  await page.waitForNetworkIdle();
  
  //点击登录
  await page.click('body > div.homepage-nav-container > div.nav-profile > a.login')
  console.log('点击了login按钮')
  await page.waitForTimeout(1000); //此处停顿1秒便于观察效果
  
  //点击"百度账号"标签并填写账号密码
  await page.click('#change-login > div > a.passport-account')
  await page.waitForTimeout(1000);
  await page.type('#TANGRAM__PSP_4__userName','13811112222')
  await page.waitForTimeout(1000);
  await page.type('#TANGRAM__PSP_4__password','123456')
  await page.waitForTimeout(1000);
  //提交
  await page.click('#TANGRAM__PSP_4__submit')
  await page.waitForTimeout(5000);
  
  //完成截图
  const date = moment();
  const filePath =  date.format('YYYYMMDD_HHmmss')+ '_baidu.png'
  await page.screenshot({ path: filePath ,fullPage: true});
  await page.close();
  await browser.disconnect();
  
})();
2.3、运行代码

将文件保存为baidu.js，进入此目录，安装依赖，安装过程中可能会因为npm安装源的问题失败，可更换源重试，完成后运行代码

npm i puppeteer moment
node baidu.js
3、截取iframe片断

如需要有道云笔记中markdown格式的一大段笔记截图

const frameElement = await page.waitForSelector('#mdEditor');
const boundingBox = await frameElement.boundingBox();
if (boundingBox) {
  await page.screenshot({
      path: filePath,
      clip: boundingBox
    });
    console.log('Screenshot captured successfully.');
  } else {
    console.log('Failed to capture screenshot. Bounding box not found.');
  }
赞赏(Donation)
微信(Wechat Pay)

donation-wechatpay

相关博客