广告位联系
返回顶部
分享到

puppeteer实现html截图的示例代码方法

JavaScript 来源:脚本之家 作者:秩名 发布时间:2019-01-10 18:00:59 人浏览
摘要

puppeteer是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。 安装 直接运行安装命令: npm install puppeteer 如果出现

puppeteer是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

安装

直接运行安装命令:

npm install puppeteer


如果出现无法安装的问题,可以使用淘宝镜像。

puppeteer实现滑动截图

在我 puppeteer 使用截全屏的过程中发现有些图片无法截取到,而实际上是因为有些图片是懒加载的,如果你没有滑动到图片的位置,那么这个图片是不会加载。

现在我的方式是采用模拟浏览器滚动条滑动的方式滑动底部来使图片加载出来。

代码如下:
 

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



版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计