当前位置: 首页 > 后端技术 > Node.js

前端爬虫框架-puppeteer介绍(一)

时间:2023-04-03 21:00:37 Node.js

Puppeteer前言之所以开始学习这个技术是因为想做一个类似人人视频的电影资源网站,所以想通过学习爬虫获取相关资料.供您自己下载使用的电影资源。之前了解到大部分爬虫都是使用python实现的,但是因为工作忙,没有太多时间去学习新的语言,所以去网上搜索一下有没有前端使用的爬虫框架。网上大都推荐节点库——puppeteer什么是Puppeteer?Puppeteer是一个节点库,它提供了一组用于操作Chrome的API。总的来说就是一个headlesschrome浏览器(当然你也可以配置成有UI的,默认是没有的)。既然是浏览器,Puppeteer就可以在浏览器上做一切我们可以手动做的事情,比如用户的鼠标键盘操作。Puppeteer可以做什么?1.可以生成网页截图,生成PDF2。爬虫(常用)可以爬到异步加载内容的网页(基本上都可以爬)3.模拟用户操作(如:键盘鼠标操作,提交表单,打开/关闭/登录网页)4.实现UI自动化测试,帮助分析网站性能问题,运行环境,安装因为在puppeteer中,大部分都是异步操作,所以看各种文档可以看到async,await之类的ES7语法。目前官方要求是:在puppeteerv1.18.1之前,NODE版本需要至少为v6.4.0。NODE版本从v1.18.1到v2.1.0至少不低于v8.9.0。从v3.0.0开始,NODE的版本至少不低于v10.18.1,如果要使用async/await,NODE的版本至少不低于v7.6.0。您使用最新的chrome驱动程序。这是当你通过npm安装puppeteer时会自动检查你本地的驱动版本,然后自动下载最新的chrome驱动来安装puppeteernpminstallpuppeteer--savecnpminstallpuppeteer--saveyarnaddpuppeteerthroughnpm/cnpm/yarn使用(截图操作)当你安装完puppeteer后,我们就可以写一个简单的例子了。开始我们的学习之路demo1//1.首先介绍puppeteerconstpuppeteer=require("puppeteer");//2.启动puppeteer,启动浏览器引擎puppeteer.launch({ignoreHTTPSErrors:true,headless:false,slowMo:250,defaultViewport:{width:1920,height:1080,},timeout:0,}).then(async(browser)=>{//3.新建一个浏览器页面letnewPage=awaitbrowser.newPage();//4.设置本页跳转地址awaitnewPage.goto("https://www.chapaofan.com/");//5.本页截图awaitnewPage.screenshot({type:"jpeg",path:"../index.jpg",fullPage:true,});//6.关闭浏览器awaitbrowser.close();});demo结果已经切到项目上层目录,需要图片代码分析(根据上面源码)1.puppeteer.launch(options)该方法用于启动chrome浏览器,返回一个Promise,使用then方法获取浏览器实例,然后就可以操作浏览器参数选项了(这里给出一些常用参数):(1)ignoreHTTPSErrors:导航时是否忽略HTTPS错误,默认为false;(2)headless:是否以headless模式运行浏览器,默认为true。这里的headless模式一般是指是否有浏览器界面(以UI的形式显示操作)(3)slowMo:将puppeteer操作减少指定的毫秒数,这样可以看到每个操作都有做过么,这个很有用(4)defaultViewport:width:页面显示的宽度,默认为800height:页面显示的高度,默认为600(5)timeout:最大时间等待Chrome实例启动。默认值为30000(30秒)。如果传入0,则不限制时间。2.browser.newPage()该方法返回一个promise返回一个新的Page对象,在浏览器中创建一个新页面3.newPage.goto(url,options)该方法为新创建的地址栏设置URL值页,并跳转到相应的地址。参数选项:(1)url:导航到对应的地址,地址应该有http或https协议,例如:https://(2)options:timeout:跳转的等待时间,单位为毫秒,默认为30秒。设置0意味着无限期等待直到{...restOPtions}通过。4.newPage.screenshot(options)这个方法返回一个Promise。截屏操作参数选项:(1)path:截屏的保存路径,截屏图像类型由文件扩展名推断。如果是相对路径,则从相对路径解析(这里推荐使用相对路径)。如果不指定路径,则图片不会保存到硬盘(2)type:指定的截图类型,jpeg|png,默认为png(3)quality:图片质量,可选0-100,png格式不可用(4)fullPage:如果设置为true,则完整页面(包括需要的部分)被滚动)被捕获,默认为false(5)clip:x:裁剪区域是左上角的相对x坐标y(0,0):y坐标相对于左上角的裁剪区域(0,0)width:裁剪宽度height:裁剪高度(6)omitBackground:白色背景默认隐藏,背景透明(对png格式非常有用)(7)encoding:图像编码可以是base64或binary,默认是“binary”。图片编码格式的转换对图片的上传下载有很大的影响函数5.borwser.close()关闭Chromium及其所有页面(如果页面打开)。Browser对象本身被视为已处理,不能再使用。除非你自己创建一个新的浏览器