puppeteer实现html截图的示例代码


Posted in Javascript onJanuary 10, 2019

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截图的示例代码

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

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

Javascript 相关文章推荐
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
JavaScript实现简单评论功能
Aug 17 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 #Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 #Javascript
浅谈JavaScript 代码简洁之道
Jan 09 #Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 #Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 #Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 #Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 #Javascript
You might like
文章推荐系统(三)
2006/10/09 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
设计部经理的岗位职责
2013/11/16 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
高中生家长寄语大全
2014/04/03 职场文书
工作作风承诺书
2014/08/30 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
合作合同协议书
2016/03/21 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技