生成网站截图
分类:彩世界官方下载-Web前端

浏览器开采职职员和工人具为网址和Web应用程序的底层提供了好些个耸人听别人说的精选。那个意义能够由此第三方工具更加的巩固和自动化。在本文中,大家将切磋Puppeteer,那是叁个用来Chrome / Chromium的基于节点的库。

三个Node库,它提供了尖端API来由此DevTools合同决定Chrome或Chromium。Puppeteer暗许情况下无头运营,但能够配备为运转全部的Chrome或Chromium。

Puppeteer由谷歌Chrome背后的团协会开垦,因而你能够一定它将收获很好的维护。它使大家能够通过一个精短易用的API通过JavaScript以编程方式在Chromium浏览器上实施屡见不鲜操作。

使用Puppeteer,您可以:

生成网址截图,包蕴SVG和Canvas

行使正规DOM API访谈网页并领取信息

生成预渲染的剧情-即服务器端渲染

像Cypress同样自动化UI测量试验

Puppeteer并不曾Selenium,PhantomJS之类的东西做任何新的事体,但是它提供了两个总结易用的API,并提供了很好的抽象性,由此大家不用顾忌难点的本来面目。细节管理。

它也获取了责无旁贷的尊崇,因此Chromium支持ECMAScript的持有新功用。

先决条件

对此本学科,您需求JavaScript,ES6 +和Node.js的根底知识。

您还非得已经安装了新星版本的Node.js的。

yarn在本教程中,大家将直接接收。固然yarn还未有安装,请从那边安装。

为了保证大家在同大器晚成页面上,那个是本课程中应用的本子:

Node 12.12.0

yarn 1.19.1

puppeteer 2.0.0

安装

要在类型中运用Puppeteer,请在顶峰中运作以下命令:

$yarnaddpuppeteer

介意:安装Puppeteer时,它会下载保障可与该API一齐利用的Chromium的新式版本(〜170MB macOS,〜282MB Linux,〜280MB Win)。要跳过下载,请参阅情状变量。

假诺您没有要求下载Chromium,则能够安装:puppeteer-core

$yarnaddpuppeteer-core

puppeteer-core耐心成为Puppeteer的轻量级版本,用于运维现成的浏览器安装或接二连三到长途浏览器。确认保证您安装的puppeteer-core版本与你打算连接的浏览器宽容。

注意:仅从1.7.0版发布。puppeteer-core

用法

Puppeteer起码需求Node v6.4.0,但我们将利用async / await,仅在Node v7.6.0或越来越高版本中受协理,因而请确认保障将Node.js更新到新型版本以赢得具备好处。 。

让大家浓烈钻研一些用到Puppeteer的莫过于示例。在本教程中,大家将是:

动用Puppeteer生成Unsplash的显示器截图

使用Puppeteer创设骇客音信PDF

使用Puppeteer登录Facebook

1.采取Puppeteer生成Unsplash的荧屏截图

动用Puppeteer做到这点真正相当轻松。继续,在类型的根目录中开创叁个文件。然后粘贴以下代码:screenshot.js

constpuppeteer=requireconstmain=async()=>{constbrowser=awaitpuppeteer.launch()constpage=awaitbrowser.newPage()awaitpage.goto('https://unsplash.com')awaitpage.screenshot({path:'unsplash.png'})awaitbrowser.close

先是,大家须求puppeteer包装。然后,我们launch在其上调用伊始化实例的方法。此方式是异步的,因为它回到一个Promise。因此,我们await为其获取browser实例。

下一场大家调用newPage它并转到Unsplash并对其张开截图,并将截图另存为。unsplash.png

当今持续失败入以下内容在终端中运行以上代码:

$nodescreenshot

今昔,在5-10秒后,您将在档期的顺序中观望二个包蕴Unsplash显示器截图的文件。请小心,视口设置为800px x 600px,因为Puppeteer将此视口设置为始发页面尺寸,该尺寸定义了显示器截图的尺码。能够运用Page.setViewport(卡塔尔国自定义页面大小。unsplash.png

让大家将视口校订为一九一九px x 1080px。在goto方式在此之前插入以下代码:

awaitpage.setViewport({width:1920,height:1080,deviceScaleFactor:1,})

前些天,继续发展,也能够变动文件名以在像这么的方法:unsplash.png``unsplash2.png``screenshot

awaitpage.screenshot({path:'unsplash2.png'})

今后,整个文件应如下所示:screenshot.js

constpuppeteer=requireconstmain=async()=>{constbrowser=awaitpuppeteer.launch()constpage=awaitbrowser.newPage()awaitpage.setViewport({width:1920,height:1080,deviceScaleFactor:1,})awaitpage.goto('https://unsplash.com')awaitpage.screenshot({path:'unsplash2.png'})awaitbrowser.close

2.接收Puppeteer创造骇客消息PDF

后天成立一个名称叫的文书,并将以下代码粘贴到中间:pdf.js

constpuppeteer=requireconstmain=async()=>{constbrowser=awaitpuppeteer.launch()constpage=awaitbrowser.newPage()awaitpage.goto('https://news.ycombinator.com',{waitUntil:'networkidle2'})awaitpage.pdf({path:'hn.pdf',format:'A4'})awaitbrowser.close

咱俩仅从screenshot代码中退换了两行。

首先,大家将网站替换为Hacker News,然后增多了networkidle2

awaitpage.goto('https://news.ycombinator.com',{waitUntil:'networkidle2'})

networkidle2对于进行长日子轮询或其余别的附带活动的页面特别常有用,而且当起码八个互联网连接持续起码500飞秒时,以为导航已做到。

下一场,大家调用了pdf成立PDf的措施并将其调用,并将其格式化为大小:hn.pdf``A4

awaitpage.pdf({path:'hn.pdf',format:'A4'})

而已。以往,大家得以运营该文件来生成Hacker News的PDF。让大家后续在巅峰中运作以下命令:

$nodepdf

那就要品种的根目录中生成Camry高低的PDF文件。hn.pdf

3.使用Puppeteer登录到Facebook

利用以下代码创造多个名字为的新文件:signin.js

constpuppeteer=requireconstSECRET_EMAIL='example@gmail.com'constSECRET_PASSWORD='secretpass123'constmain=async()=>{constbrowser=awaitpuppeteer.launchconstpage=awaitbrowser.newPage()awaitpage.goto('https://facebook.com',{waitUntil:'networkidle2'})awaitpage.waitForSelector('#login_form')awaitpage.type('input#email',SECRET_EMAIL)awaitpage.type('input#pass',SECRET_PASSWORD)awaitpage.click('#loginbutton')//awaitbrowser.close

我们创设了八个变量SECRET_EMAILSECRET_PASSWORD,应将其替换为你的Facebook电子邮件和密码。

然后,我们launch的浏览器,并设置headless模式,false出产了整机版的Chromium浏览器的。

然后,我们转到推特(TwitterState of Qatar,等待全数内容加载实现。

在Facebook上,#login_form能够由此DevTools访谈采纳器。该接受器包涵登陆表单,由此大家采用waitForSelector办法来等待它。

下一场,大家供给输入大家的emailpassword,所以大家吸引选择input#email,并input#pass从DevTools,并透过大家的SECRET_EMAILSECRET_PASSWORD

事后,大家单击#loginbutton以报到到推特。

末段风流倜傥行被解说掉,使咱们看来了打字的全经过email,并password和点击登陆按键。

在终端中键入以下内容,继续运维代码:

$nodesignin

那将开发银行全套Chromium浏览器,然后登入推特。

结论

在本教程中,大家创立了叁个类型,该类型开创钦命视口内其余给定页面包车型大巴显示器截图。我们还创造了多少个项目,能够在其间创设任何网址的PDF。然后,我们以编制程序格局设法登录了照片墙。

Puppeteer最近宣布了版本2,它是三个很好的软件,能够经过轻易易用的API自动推行烦琐的天职。

你能够在其官网上询问关于Puppeteer的越多消息。那些文书档案非常好,有多量的示范,而且具有文书档案都有据可查。

当今,使用Puppeteer能够自行奉行您日常生活中无聊的义务。

本文由彩世界开奖发布于彩世界官方下载-Web前端,转载请注明出处:生成网站截图

上一篇:分析正则表达式RegExp 下一篇:为什么要进行思维导图
猜你喜欢
热门排行
精彩图文