Puppeteer

最近写个脚本用到 puppeteer，而后装置 Chromium 呈现一点问题，这里记录一下解决方案。 Puppeteer 主动装置失败在 Puppeteer 装置时会主动装置 Chromium，然而却总是报错 502 导致下载失败，间接下载能够下载，命令行 wget 也能够，猜想是因为 Puppeteer 开启了新的 process 来装置导致环境变量失落，而后就迷信上网失败了。 这会回头看了看 Puppeteer 的装置脚本，如同能够应用 npm_config_https_proxy 等配置来迷信上网。 function overrideProxy() { // Override current environment proxy settings with npm configuration, if any. const NPM_HTTPS_PROXY = process.env['npm_config_https_proxy'] || process.env['npm_config_proxy']; const NPM_HTTP_PROXY = process.env['npm_config_http_proxy'] || process.env['npm_config_proxy']; const NPM_NO_PROXY = process.env['npm_config_no_proxy']; if (NPM_HTTPS_PROXY) { process.env['HTTPS_PROXY'] = NPM_HTTPS_PROXY; } if (NPM_HTTP_PROXY) { process.env['HTTP_PROXY'] = NPM_HTTP_PROXY; } if (NPM_NO_PROXY) { process.env['NO_PROXY'] = NPM_NO_PROXY; }}不过过后没看就间接打算手动装置 Chromium 了，要手动装置在装置 Puppeteer 时须要先敞开主动下载： ...

起源最近被前共事问是否能够帮他去爬取一个网站的数据，而后他把网站发给我了，之后我就去钻研了下， 原本打算用spider-flow 这个货色来爬的，毕竟能不写代码的，为啥我要去写代码，而后钻研了下spider-flow 发现满足不了需要，节约了两天工夫，， 还是老老实实手写把,对spider-flow 感兴趣的能够看看我写的：https://www.mubucm.com/doc/7rBgfYhSzrt最终成果 作者在写这篇文章的技能和环境前端略懂一二nodejs 无所不通数据库无所不通window零碎puppeteer 版本: 19.7.4node版本: 14.18.0本文只适宜小白浏览，大佬请出门左转~页面地址http://zjj.sz.gov.cn:8004/?__EVENTARGUMENT=3&ddlPageCount=20本文将以爬取一手房预售房源数据为例 页面剖析一手房预售信息页面信息首页数据从哪里来？ 页面执行逻辑 页面渲染逻辑 我的项目详情页跳转逻辑：http://zjj.sz.gov.cn/ris/bol/szfdc/projectdetail.aspx?id=126809 证件详情页跳转逻辑：http://zjj.sz.gov.cn/ris/bol/szfdc/certdetail.aspx?id=126809 思路思路1：模仿用户操作，像一个失常的用户去点击而后爬取数据，之后再把数据存储到数据库, 而后点击分页反复这个操作，直到爬取完所有数据思路2：间接调用获取数据接口，而后解析数据，之后再把数据存储到数据库咱们先用思路1的形式来做，原本我想用思路2的做法来做，起初有个问题没解决，所以先依照思路1来实现外围代码解说puppetter 如何扭转页面的值？官网api 具体代码，依照20条/页去爬取puppetter 如何触发事件？api 实例：page.click(#AspNetPager1 > span:nth-last-of-type(1), {delay: 100})应用puppetter拜访页面，如何去解析数据？一开始我还始终被困在这个puppetter api，始终想在这个浏览器执行的时候去获取这些信息，其实这种也是能够的，然而不不便，起初百度发现能够应用cheerio这个库，像应用jquery把对页面做操作cheerio 遍历页面数据cheerio 具体代码如何把保留数据到数据库？新建一个house_info 数据库，而后搞了一个presell 预售表，预售的表构造 sql相干常识查问数据select * from presell更新某一条数据：update presell set name='阿斯顿撒',enterprise=99 WHERE serial=2更新所有的数据：UPDATE presell SET address='深圳'插入数据：INSERT INTO presell (mainKey,serial,id) VALUES (1111,2,3);批量插入数据：INSERT INTO presell ( mainKey, serial, id, NAME, enterprise, address, date ) VALUES ( '10001', '2', '3', '4', '5', '6', '2022-02-06' ),( '10002', '2222', '3', '4', '5', '6', '2022-02-06' )如何批量插入数据 ...

装置失败是因为须要装置chrome，网络连接不通: 采纳阿里云下载： npm --registry https://registry.npm.taobao.org install express

起源最近忽然想尝试剪视频，所以就想先从动漫开始，二次元搞起来，剪视频就必须须要原视频，怎么找到这些资源呢，知乎一搜一大把我常常会上六DM 外面去看动漫,外面的动漫清晰度也还能够，所以就想怎么写个爬虫间接把喜爱的动漫下载下来，毕竟是干前端的，手动下载有点丢人把 最终成果 下载后的文件名不是.mp4 怎么解决比如说我下载的这个龙猫就是啥yum格局的，我间接后缀名改成.mp4 搞定，如果还不行，就上个格局工厂 应该就好了作者在写这篇文章的技能和环境前端略懂一二nodejs 无所不通window零碎puppeteer 版本: 14.3.0node版本: 16.1.0开始剖析网站, 轻易搜一个喜爱的动漫介绍页 轻易点击一个播放地址，F12 搞起来，剖析页面能够，这个网站还是会玩的，调试工具开起来就给我始终debugger如何跳过debugger死循环这种形式能够不便跳过死循环，并且咱们还能够持续调试找到页面播放地址这个网站还是很简略的， 间接把资源地址丢到iframe外面而已，难度升高了，怪不得不给他人调试，剖析播放地址由来思路1：通过接口申请剖析，是否存在共通点通过抓包，发现第一集和第二集的播放资源门路没有共同性可言，放弃o(╥﹏╥)o思路2：间接看播放器的源码逻辑，找到url的拼接逻辑找出播放器源码，间接通过调试工具找到所有的js文件，而后轻易看看 剖析播放器源码读取播放器源码发现，这个网站会在页面外面存入一个全局变量全局变量 player_aaaa会做赋值存储，而后会引入一个js文件，文件名：/static/player/parse.js关上调试工具，找到/static/player/parse.js文件，/static/player/parse.js 文件内容 浏览器控制台输出：MacPlayer.Parse + MacPlayer.PlayUrl因为播放器的源码是一个自执行函数，而后咱们又看到这个parse.js 文件外面的资源拼接形式，所以咱们能够在浏览器的控制台外面间接把这个资源给拼出来右键保留？把下面的地址放到浏览器外面拜访，发现就是咱们想下载的资源了， 到了这一步骤，咱们就能够右键保留了，当然作为一名合格的前端，咱们怎么可能会去右键保留呢，接下来咱们就筹备上大杀器，puppeteer 配合nodejs 来帮咱们实现主动下载资源demo如何做自动化？通过下面的连贯，会进入到一个解析页面，因为咱们要做成主动下载的，必须要找到视频源连贯，否则不行，o(╥﹏╥)o查找元素页面，发现了最终的资源地址最终的资源地址 应用puppeteer解析页面，获取到视频资源地址，而后应用nodejs主动下载视频思路1：遍历出播放列表，而后开始一个工作，顺次关上页面，找到资源地址，而后收集到所有的播放资源地址，应用nodejs下载到本地， 为啥不必下面那个思路，因为那个思路我把代码写完，测试了一下，发现他的服务器扛不住哈，所以还是保险点，一次一个操作思路2：应用puppetee 主动触发右键下载，并保留到咱们想要下载的中央（目前没有尝试这个办法）思路3：遍历出播放列表，而后开始一个工作，从第一个开始，关上页面，找到资源地址，应用nodejs下载到本地，下载实现，开始下一个就这样思路3 难点剖析pupeteer 如何获取元素的属性，别问我，反正我不懂， 堆栈溢出大佬通知我的堆栈溢出的答案 // 获取单个await page.evaluate('document.querySelector("span.styleNumber").getAttribute("data-Color")')// 获取多个const attr = await page.$$eval("span.styleNumber", el => el.map(x => x.getAttribute("data-Color")));nodejs下载远端视频，并显示进度const fs = require('fs');const https = require('https')// 我的demo应用的是axios 来下载const axiosRequest = require('./utils/request');// 这是一个axios实例axiosRequest.get('https://media.w3.org/2010/05/sintel/trailer.mp4', { responseType: 'stream'}).then(response => {// 返回头外面的content-length字段，会通知咱们这个视频有多大// 获取视频总长度 byte为单位const totalLength = response.headers['content-length']// 以后数据的总长度let totalChunkLength = 0// 以后读取的流const readSteam = response.data// 读取流会触发的事件readSteam.on('data', (chunk) => {totalChunkLength += chunk.lengthconsole.log('数据传输中，以后进度==>', ((totalChunkLength / totalLength) * 100).toFixed(2) + '%') });// 读取实现的工夫readSteam.on('end', (chunk) => {console.log('获取远端数据结束') });// 读取谬误会触发的事件readSteam.on('error', (err) => {console.log('获取远端数据结束，产生了谬误,错误信息==>', err) });// 写入本地的文件名const fileName = 67.mp4// 调用nodejs写入文件办法const writeFile = readSteam.pipe(fs.createWriteStream(fileName))// 写入实现事件writeFile.on("finish", () => {writeFile.close();console.log("祝贺大哥，本地数据写入实现"); });// 写入谬误触发的事件writeFile.on("error", (err) => {console.log("不好意思，写入本地文件产生异样，错误信息==>", err); });});//axios 代码如下const axios = require('axios')// 创立axios实例const service = axios.create({ baseURL: '', // api 的 base_url // 永不凋零，真男人 就是这么长久 timeout: 90000000 // 申请超时工夫})// request拦截器service.interceptors.request.use( config => { return config }, error => { // Do something with request error console.log(error) // for debug Promise.reject(error) })// 响应拦截器service.interceptors.response.use( response => { return response }, error => { return Promise.reject(error) })module.exports = service残缺代码残缺代码 ...

我的项目需要是提供一个接口通过输出一个网页地址，抓取网页中的视频地址！例如关上一个 网页地址 须要将网页中的视频地址提取进去。作为前端开发人员的惯性思维，看到这个网页的html构造，这个不是很简略嘛，一行代码就搞定：document.querySelector('video source').src 嘻嘻，功败垂成，筹备摸鱼~ 等等！这个只是在浏览器的控制台中拿到了视频的地址，然而如何转化成为提供一个接口，通过接口返回这个地址呢？初步猜测，应用get申请获取网页的html，而后剖析dom构造，解析出video标签。 谬误尝试间接通过get申请页面的地址获取到的内容并不是咱们在浏览器所看到的内容。目前的网页大多都是动静网页，即页面最终出现的内容是通过加载js后执行脚本动静拼接的，因而页面中的video标签并不是间接从服务端拼接好的。 浏览器加载网页的申请截图，没有间接返回dom构造，全是加载一堆js和css文件 并且！很多网站都做了防爬措施，间接申请页面的地址会返回一个两头页面，例如抖音和微博的视频详情页面，间接申请会返回一个相似于认证的页面，初步剖析了这个页面，这个直达页面应该是判断有没有相应cookie的信息，如果没有相应的信息，就会给浏览器设置cookie之类的信息，最初会走一个window.location.reload();让页面刷新一次（微博会间接走到一个Sina Visitor System的页面不会间接跳转到详情页面）。这个脚本在浏览器中会主动执行，因而会从新加载一次，看到最终的详情页面。然而get申请仅仅是获取到了直达页面的html，并没有走到真正的详情页面。 抖音详情页面get申请https://www.douyin.com/video/7020764246476590339 微博详情页面get申请https://weibo.com/tv/show/1034:4699424946061376?mid=4699425262272582 哎呀！连最终的网页信息都拿不到，怎么可能拿到页面视频地址呢？这下可不能欢快的摸鱼了 通过调研后决定采纳 Node.js + Puppeteer来实现这个性能，本文次要记录我的项目的实现思路和开发部署中遇到的难点及其解决方案，仅供学习参考。 Puppeteer 是 Chrome 开发团队在 2017 年公布的一个 Node.js 包，用来模仿 Chrome 浏览器的运行.次要通过Puppeteer运行Chromium加载网页实现剖析页面dom获取video标签，实现视频地址抓取参考资料： Puppeteer中文文档 https://github.com/puppeteer/puppeteer 开发环境（Windows）决定应用puppeteerjs后外面在windows环境下进行开发，windows环境为Node v12.16.2, puppeteerjs v2.1.1 puppeteerjs的最新版为13.1.1。然而puppeteerjs v3.0版本及以上须要Node v10及以上,因为我本地的开发环境Node为v12,服务器上的Node为v8，因而本地开发没问题，然而服务器上始终部署不胜利，且服务器下面有很多其余我的项目都是基于node v8版本的，因而服务器上的node版本不宜降级。为放弃和服务器版本统一，windows环境下的puppeteerjs也应用2.1.1版本; 间接上代码server2.js const puppeteer = require('puppeteer');async function getVideoUrl () { const browser = await puppeteer.launch();// 关上浏览器 const page = await browser.newPage(); await page.emulate(puppeteer.devices['iPhone 6']) await page.goto('https://www.douyin.com/video/7020764246476590339'); // 跳转到指定页面 await page.waitFor(2000) // 延时2s加载页面 puppeteer2.1.1应用 waitFor ^13.0.1以上应用 waitForTimeout const pageHtml = await page.content(); // 获取页面html Gets the full HTML contents of the page, including the doctype. console.log(pageHtml);}getVideoUrl()执行node server2.js，输入的后果就是详情页面的html代码了 ...

puppeteer运行呈现：Could not find browser revision 809590. Run "PUPPETEER_PRODUCT=firefox npm install" or "PUPPETEER_PRODUCT=firefox yarn install"报错，显然时没找到对应版本的浏览器。GitHub上issues上提供解决方案试了一圈度没用。起初在官网api文档里发现了puppeteer.createBrowserFetcher:createBrowserFetcher是一个官网的浏览器版本管理工具，只需用指定版本就能对应下载,回调返回装置的门路。实例： const puppeteer = require("puppeteer");const browserFetcher = puppeteer.createBrowserFetcher();browserFetcher.download("809590").then((res) => { puppeteer .launch({ executablePath: res.executablePath, //chrome执行门路 headless: false, //浏览器无头模式 }) .then(async (browser) => { // 保留 Endpoint，这样就能够从新连贯 Chromium const browserWSEndpoint = browser.wsEndpoint(); // 从Chromium 断开连接 browser.disconnect(); // 应用endpoint 从新和 Chromiunm 建设连贯 const browser2 = await puppeteer.connect({ browserWSEndpoint }); // Close Chromium // await browser2.close(); });});