Puppeteer 爬取动态生成的网页实战


Posted in Javascript onNovember 14, 2018

Puppeteer 相关介绍与安装不过多介绍,可通过以下链接进行学习

一、Puppeteer

开源地址

英文文档

中文社区

二、爬取动态网页

1. 需求

首先,了解下我们的需求: 爬取zoomcharts 文档中 Net Chart 目录下所有访问连接对应的页面,并保存到本地

Puppeteer 爬取动态生成的网页实战

2. 研究 ZoomCharts 文档页面结构

首先,我们得研究透 ZoomCharts 页面如何加载,以及左侧导航的 DOM 树结构,才好进行下一步操作

页面首次加载

Puppeteer 爬取动态生成的网页实战

页面首次加载,左侧导航第一个目录 Introduction 高亮,从控制台可看出,该元素增加了 active 类,同时 li[data-section="net-chart"] 节点下只有一个元素节点 a

点击 Net Chart 目录

Puppeteer 爬取动态生成的网页实战

点击 Net Chart 目录, Net Chart 目录高亮,下拉显示子目录,查看控制台,其元素节点增加 active 类,并增加 ul 子元素节点, 此时,第一个子目录节点也只有一个子元素节点 a

结论

不难发现, 左侧目录是动态生成的,而不是静态写死的,只有点击父级目录,其子目录才会生成显示,同时,父级目录元素上的 drop 类表明存在子级目录

3. 编写主程序

通过上面分析,得出大概流程如下

  • 从上到下,遍历 Net Chart 目录的 DOM 树,当找到 a.drop 的元素节点,模拟鼠标点击事件 click ,生成子目录节点
  • 找到 Net Chart 目录下所有的 a 链接,生成一个数组
  • 遍历数组,访问每一个子目录页面,保存页面的 html 文件到本地

接下来实现每个具体流程

项目初始化

安装 puppeteer , rimraf (文件夹操作时需用到)

npm i -S puppeteer rimraf

新建 test.js 文件并引入

const puppeteer = require('puppeteer');
const chalk = require('chalk');
const path = require('path');
const https = require('https');
const fs = require('fs');
const rm = require('rimraf');

const settings = {
 headless: false
}

function resolve(dir, dir2 = '') {
	return path.posix.join(__dirname, './', dir, dir2);
}

async function main () {
 const browser = await puppeteer.launch(settings); // 创建一个Browser 对象
 try {
  const page = await browser.newPage(); // 使用 Browser 创建 Page 
  page.setDefaultNavigationTimeout(600000);
  // 监听 console 
  page.on('console', msg => {
   for (let i = 0; i < msg.args().length; ++i) {
    console.log(`${i}: ${msg.args()[i]}`);
   }
  });
  
  <!-- main start -->
  // main 区域
  
  <!-- end start-->
  console.log('服务正常结束')
 } catch (error) {
  console.log('服务出现错误:')
  console.log(error)
 } finally {
  
 }
}

main()

接下来所有代码都在 main 区域内完成, 完整代码可访问github代码仓库 查看,下面仅列出每部分的思路

创建文件夹,用于保存爬取的文件

  • 定义文件输出路径
  • 根据路径生成文件夹
  • 当文件夹已经存在,先删除,再新建

实现 Net Chart 目录下所有 a.drop 元素的点击事件

这部分涉及到DOM 操作, 只有在 page.evaluate() 中才能访问真实的 DOM 元素,同时,在 page.evaluate() 中不能直接调用外面定义的函数,可将函数传递进去,或将函数绑定到 window 对象上

await page.evaluate(async () => {
 const rootNode = document.querySelector('#menu > ul > li:nth-child(5) > ul > li:nth-child(5)');
 await window.walkDOM(rootNode)
})

此时,绑定到 window 对象上的 walkDOM 函数需要在 page.evaluateOnNewDocument 函数中定义才能生效

await page.evaluateOnNewDocument(() => {
 // 遍历DOM
 window.walkDOM = (node) => {
  if (node === null) {
   return
  }
  if (node.tagName === 'A' && node.className.indexOf('drop') > -1) {
   node.click() // 点击事件
  }
  node = node.firstElementChild
  while (node) {
   walkDOM(node)
   node = node.nextElementSibling
  }
 }
})

当Net Chart 目录下所有 a.drop 元素点击过后, Net Chart 目录下所有后代子目录都会加载生成,接下来操作就简单了

获取Net Chart 目录下所有 a 元素

  • 通过 document.querySelectorAll() 查找到所有 a 元素,保存到数组
  • 遍历数组,对数组每一项进行处理成 {href: '',text: ''} 对象
  • 返回对象数组

遍历对象数组, 访问每一个链接,下载其HTML文件

  • 跳转每一个链接,下载需要的html到指定文件夹
  • 当 HTML 中存在 img 时,下载所有图片

4. 总结

第一次使用Puppeteer也是磕磕绊绊,花费不少时间,期间也参考了不少文章,还需多多练习

代码仓库

代码仓库

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

Javascript 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
React和Vue中监听变量变化的方法
Nov 14 #Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 #Javascript
js html实现计算器功能
Nov 13 #Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 #Javascript
小程序登录态管理的方法示例
Nov 13 #Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 #Javascript
You might like
php MessagePack介绍
2013/10/06 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python编程中的文件操作攻略
2015/10/16 Python
python字符串的常用操作方法小结
2016/05/21 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
python简单实例训练(21~30)
2017/11/15 Python
简单实现python进度条脚本
2017/12/18 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
对python 命令的-u参数详解
2018/12/03 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python利用opencv保存、播放视频
2020/11/02 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
最新教师自我评价分享
2013/11/12 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
英语读书笔记
2015/07/02 职场文书
股东出资协议书
2016/03/21 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang