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 相关文章推荐
js 用CreateElement动态创建标签示例
Nov 20 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
几种响应式文字详解
May 19 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
浅谈JavaScript作用域
Dec 06 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php ios推送(代码)
2013/07/01 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python实现统计单词出现的个数
2015/05/28 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
浅析matlab中imadjust函数
2020/02/27 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
台湾专柜女包:KINAZ
2019/12/26 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
部队学习十八大感言
2014/01/11 职场文书
成绩单家长意见
2015/06/03 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫