puppeteer实现html截图的示例代码

 更新时间:2019年01月10日 08:59:18   作者:morethink   我要评论

通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据,这篇文章主要介绍了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();
})();

参考文档:

https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#elementhandlescreenshotoptions

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • node.js中使用Export和Import的方法

    node.js中使用Export和Import的方法

    这篇文章主要介绍了node.js中使用Export和Import的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅谈手写node可读流之流动模式

    浅谈手写node可读流之流动模式

    这篇文章主要介绍了浅谈手写node可读流之流动模式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • node安装--linux下的快速安装教程

    node安装--linux下的快速安装教程

    本篇文章主要介绍了node安装--linux下的快速安装教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 基于Node.js的WebSocket通信实现

    基于Node.js的WebSocket通信实现

    这篇文章主要介绍了基于Node.js的WebSocket通信实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 详解nodejs爬虫程序解决gbk等中文编码问题

    详解nodejs爬虫程序解决gbk等中文编码问题

    本篇文章主要介绍了nodejs爬虫程序解决gbk等中文编码问题,解决了网页的编码与nodejs默认编码不一致造成的乱码问题,有兴趣的可以了解一下
    2017-04-04
  • yarn与npm的命令行小结

    yarn与npm的命令行小结

    想必最近大家对新的JavaScript包管理工具yarn已经有所耳闻,并已通过npm i -g yarn进行了安装,现在想知道怎么样使用吗?如果你了解 npm,你已经会很大一部分啦!下面是这篇文章从npm切换到yarn的一些笔记。有需要的朋友们可以参考借鉴。下面来一起看看吧。
    2016-10-10
  • node.js中的querystring.stringify方法使用说明

    node.js中的querystring.stringify方法使用说明

    这篇文章主要介绍了node.js中的querystring.stringify方法使用说明,本文介绍了querystring.stringify的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Node批量爬取头条视频并保存方法

    Node批量爬取头条视频并保存方法

    在本篇文章中我们给大家介绍了node爬取头条里面的视频,并进行批量保存的方法,有需要的朋友可以测试以下。
    2018-09-09
  • 搭建pomelo 开发环境

    搭建pomelo 开发环境

    Pomelo是基于 Node.js 的高性能、分布式游戏服务器框架。它包括基础的开发框架和相关的扩展组件(库和工具包),可以帮助你省去游戏开发枯燥中的重复劳动和底层逻辑的开发。Pomelo不但适用于游戏服务器开发,也可用于开发高实时 Web 应用
    2014-06-06
  • 初识Node.js

    初识Node.js

    本文给大家介绍的是node.js的初体验,从最简单的内容开始,慢慢的深入分析node.js。并附上一则很不错的文章《7天学会nodeJS》更加详细的向我们展示了node.js的学习步骤。
    2015-03-03

最新评论