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 学习 - 提高篇
Feb 02 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 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
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php计算税后工资的方法
2015/07/28 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
JS实现使用POST方式发送请求
2019/08/30 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Django操作session 的方法
2020/03/09 Python
怎么快速自学python
2020/06/22 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
大学军训通讯稿
2015/07/18 职场文书
教师旷工检讨书
2015/08/15 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
小学数学国培研修日志
2015/11/13 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python