nodejs+puppeteer+chromium爬取异步数据页面（英雄联盟英雄资料列表页+详情页）

puppeteer介绍

对于静态页面的爬取是灰常简单的，一个request+cherrico即可，今天我动手对英雄联盟官网英雄资料爬取时发现英雄列表和详情页是通过js异步渲染的数据，所以就用上了这个神器puppeteer

Puppeteer能够模拟一个浏览器的运行环境，能够请求网站信息，并运行网站内部的逻辑。然后再通过WS协议动态的获取页面内部的数据，并能够进行任何模拟的操作(点击、滑动、hover等),并且支持跳转页面，多页面管理。甚至能注入node上的脚本到浏览器内部环境运行，总之，你能对一个网页做的操作它都能做，你不能做的它也能做。

环境和安装

Puppeteer 至少需要 Node v6.4.0，如要使用 async / await，只有 Node v7.6.0 或更高版本才支持。 node下载地址： https://nodejs.org/zh-cn/

装puppeteer： yarn add puppeteer --ignore-scripts 或者 npm i --save puppeteer --ignore-scripts，为什么要加--ignore-scripts？因为puppeteer默认是会下载Chromium，直接下载Chromium会失败，加了--ignore-scripts 会跳过这一步

所以需要单独下载Chromium，下载地址：https://download-chromium.appspot.com/ ，没有翻墙工具的话点这里下载，还是很贴心噶^_^

把下载刚刚下载的文件解压备用

代码

const chalk = require('chalk')
const fs = require("fs")
const devices = require('puppeteer/DeviceDescriptors')//用来更改puppeteer访问设备
const puppeteer = require('puppeteer');puppeteer.launch({headless: false, //不使用无头模式使用本地可视化executablePath: "C:/Users/Administrator/Desktop/express-requetsAPI--master/chrome-win/chrome.exe", //因为是yarn add puppeteer --ignore-scripts没有安装chromium，需要制定本地chromium的chrome.exe路径所在,刚才下载后解压后的全路径//设置超时时间timeout: 15000,//如果是访问https页面 此属性会忽略https错误ignoreHTTPSErrors: true,// 打开开发者工具, 当此值为true时, headless总为falsedevtools: true,
}).then(async browser => {function formatProgress (current, TOTAL_PAGE) { let percent = (current / TOTAL_PAGE) * 100let done = ~~(current / TOTAL_PAGE * 40)let left = 40 - donelet str = `英雄个数：${TOTAL_PAGE} 当前进度：[${''.padStart(done, '=')}${''.padStart(left, '-')}] 已完成${Math.round(percent*100) / 100}%` //padStart es7return str}const page = await browser.newPage()page.on('console', msg => {if (typeof msg === 'object')console.dir(msg)elseconsole.log(chalk.blue(msg))})await page.setViewport({width: 1920, height: 1080});// await page.emulate(devices['iPhone X'])await page.goto('http://lol.qq.com/data/info-heros.shtml', { waitUntil: "networkidle2" })await page.waitFor(1000)// console.log(await page.$eval('#jSearchHeroDiv li a', el => el.href))let heros = await page.$$('#jSearchHeroDiv li a')let re = ""for(let i = 0; i < heros.length; i++){// if(i==5) break;await page.goto('http://lol.qq.com/data/info-heros.shtml', { waitUntil: "networkidle2" })await page.waitFor(2000)heros = await page.$$('#jSearchHeroDiv li a')await heros[i].click()await page.waitFor(3000)await handleData(i, heros.length)console.clear()console.log(chalk.yellow(formatProgress(i, heros.length)))console.log(chalk.yellow('第'+(i+1)+'个英雄数据加载完毕'))await page.waitFor(2000)}async function handleData(i, len) {let result = await page.evaluate(() => {let data = {}data.DATAname = document.querySelector('#DATAname').innerTextdata.DATAtitle = document.querySelector('#DATAtitle').innerTextlet tags = document.querySelectorAll('#DATAtags span')data.DATAtags = Array.from(tags).map(v => v.innerText)let keys = document.querySelectorAll('#DATAinfo dt')let values = document.querySelectorAll('#DATAinfo dd i')data.DATAinfo = []keys.forEach((v, i) => {data.DATAinfo.push({type: v.innerHTML, value: values[i].style.width})})return data})re += JSON.stringify(result) + (i == len-1 ? "" : ",\n")}let json = "[\n"+re+"\n]"console.log(chalk.green("所有数据抓取完毕:\n", json))fs.writeFile('heros_detail.txt', json, 'utf8', function(error){if(error){console.log(chalk.green(error));return false;}console.log(chalk.blue('数据写入文件成功！'));})// await page.screenshot({//  path: './screenshot-x.png',//   type: 'png',//  // quality: 100, 只对jpg有效//  fullPage: true,//   // 指定区域截图，clip和fullPage两者只能设置一个//    // clip: {//    //   x: 0,//    //   y: 0,//    //   width: 1000,//     //   height: 40//   // }// });await browser.close()
}).catch(err => console.log(err))

以上代码实现思路：遍历列表页英雄总数 -> 获取每个被点击进入详情页的dom或url -> 遍历访问每个详情页 -> 写一个处理每个详情页的函数 -> 处理完每个页面之后控制台打印当前进度并将每个处理后的数据对象转成json拼接为字符串，最后处理成合法json格式的数组 -> 创建txt文件并写入结果数据或者写入数据库

如果需要还详细的数据，比如皮肤、英雄背景、技能介绍等，在handleData函数中处理即可
常用api：

// page.type 获取输入框焦点并输入文字// page.click()/ElemetHandle.click() 点击一个元素// page.keyboard.press 模拟键盘按下某个按键，目前mac上组合键无效为已知bug// page.waitFor 页面等待，可以是时间、某个元素、某个函数// page.frames() 获取当前页面所有的 iframe，然后根据 iframe 的名字精确获取某个想要的 iframe// page.evaluate() 在浏览器中执行函数，相当于在控制台中执行函数，返回一个 Promise// Array.from 将类数组对象转化为对象// page.$$(selector) 获取一组元素，底层调用的是 document.querySelectorAll(). 返回 Promise(Array(ElemetHandle)) 元素数组.
// page.$(selector) 获取单个元素，底层是调用的是 document.querySelector() , 所以选择器的 selector 格式遵循 css 选择器规范
// page.$eval("#ele", el => el.innerHTML) 相当于在 iframe 中运行 document.queryselector 获取指定元素，并将其作为第一个参数传递
// page.$$eval(".ele", els => els.map(el => el.innerHTML)) 相当于在 iframe 中运行 document.querySelectorAll 获取指定元素数组，并将其作为第一个参数传递

nodejs+puppeteer+chromium爬取异步数据页面（英雄联盟英雄资料列表页+详情页）相关推荐

[爬虫练习]爬取同程安全应急响应公开漏洞列表以及详情
附图一张: 今天闲来无事做,就想起同程SRC有一个公开漏洞模块.然而闲的蛋疼的我就有了对其写一个爬虫将漏洞列表爬下来的冲动.有两个版本,一个是单线程的.另一个是多线程的版本. 单线程版本: #codi ...
python3+scrapy+selenium爬取英雄联盟英雄资料
继前一篇文章用nodejs+puppeteer+chromium爬取了这个英雄资料后,在本篇同样爬这个页面,思路都差不多,只是用不同语言来实现,可作为参考,个人觉得爬虫还是nodejs比较好用,可能是 ...
使用nodejs Crawler模块爬取页面dom数据，图片和视频等详解
使用 nodejs Crawler模块爬取页面数据 1. 安装 crawler 模块 2. 创建爬虫对象,开始爬取 3. 爬取文件 3.1 爬取页面结构dom树 3.2 爬取页面的图片 4. 爬取视 ...
pycharm查看html页面,pycharm爬取网页数据
1 python环境的配置 1.1 安装python文件包,放到可以找到的位置 1.2 右键计算机->属性->高级环境设置->系统变量->Path->编辑->复制p ...
python 异步加载_Python学习笔记4——爬取异步加载数据
一.什么是异步加载? 在之前的学习笔记中,爬取的网页是需要手动翻页的网址,但是一些网站是通过自动加载翻页的,如knewone网页.浏览knewone的官网就能发现,当下拉到网页最下端时,网站会自动加载 ...
谷歌插件webscraper使用问疑难杂症（插件页面跑到右边+爬取内容乱序+自定义选择多个列表+滚动抓取社交发帖+select鼠标无法选中元素+无法识别表格+插件支持范围+爬取数据与原始顺序不一致+）
博客目录谷歌插件webscraper使用问疑难杂症解决 1.插件打开后跑到了右边 2.爬取内容乱序 3.mac的支持这个插件吗 4.除了谷歌外,火狐.IE.360等浏览器支持吗 5.自定义选择多个列 ...
使用Puppeteer轻松爬取网易云音乐、QQ音乐的精品歌单
背景最近在学习Puppeteer进行自动化操作,另一方面为了防止上班时间被打扰,是时候爬点歌单在上班的时候,用来抵抗外界的干扰了. 地址项目完整代码地址:github.com/BingKui/We ...
python爬虫多久能学会-不踩坑的Python爬虫：如何在一个月内学会爬取大规模数据...
原标题:不踩坑的Python爬虫:如何在一个月内学会爬取大规模数据 Python爬虫为什么受欢迎如果你仔细观察,就不难发现,懂爬虫.学习爬虫的人越来越多,一方面,互联网可以获取的数据越来越多,另一方 ...
python大神-python大神教你在最短时间内学会爬取大规模数据
Python爬虫为什么受欢迎如果你仔细观察,就不难发现,懂爬虫.学习爬虫的人越来越多,一方面,互联网可以获取的数据越来越多,另一方面,像 Python这样的编程语言提供越来越多的优秀工具,让爬虫变得 ...

nodejs+puppeteer+chromium爬取异步数据页面（英雄联盟英雄资料列表页+详情页）

nodejs+puppeteer+chromium爬取异步数据页面（英雄联盟英雄资料列表页+详情页）相关推荐

最新文章

热门文章