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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 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
模拟xcopy的函数
2006/10/09 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
初中三年毕业生的自我评价分享
2014/02/14 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
2019年工作总结范文
2019/05/21 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
Django框架中表单的用法
2022/06/10 Python