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中的var_dump函数实现代码
Sep 07 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
其实你可以少写点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连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
详解js闭包
2014/09/02 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
Vue.js实现的购物车功能详解
2019/01/27 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
Python中asyncore的用法实例
2014/09/29 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python实现感知机(PLA)算法
2017/12/20 Python
详解python之协程gevent模块
2018/06/14 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python实现简易学生信息管理系统
2020/04/05 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
消防安全汇报材料
2014/02/08 职场文书
喝酒检查书范文
2014/02/23 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
六查六看心得体会
2014/10/14 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
学校计划生育责任书
2015/05/09 职场文书