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 相关文章推荐
window.open不被拦截的实现代码
Aug 22 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
小程序实现录音上传功能
Nov 22 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
React Native登录之指纹登录篇的示例代码
Nov 03 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
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
php7 新增功能实例总结
2020/05/25 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
Python制作爬虫采集小说
2015/10/25 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
opencv实现图像平移效果
2021/03/24 Python
体育教育专业自荐信范文
2013/12/20 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
汽车广告策划方案
2014/05/31 职场文书
护理目标管理责任书
2014/07/25 职场文书
生日宴会祝酒词
2015/08/10 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server