生成网站截图

日期:2020-01-27编辑作者:北京pk赛车网站-web前端

浏览器开拓职职员和工人具为网址和Web应用程序的最底层提供了过多耸人传说的选择。那几个意义能够因此第三方工具越来越增长和自动化。在本文中,我们将切磋Puppeteer,那是叁个用来Chrome / Chromium的基于节点的库。

贰个Node库,它提供了尖端API来因而DevTools公约决定Chrome或Chromium。Puppeteer私下认可情状下无头运维,但能够配备为运营全体的Chrome或Chromium。

Puppeteer由GoogleChrome背后的组织开拓,因而你能够一定它将收获很好的维护。它使大家能够通过多少个归纳易用的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

那就要类型的根目录中生成奥迪A8分寸的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,应将其替换为你的推特电子邮件和密码。

然后,我们launch的浏览器,并安装headless模式,false盛产了生机勃勃体化版的Chromium浏览器的。

接下来,大家转到照片墙,等待全部内容加载完成。

在Facebook上,#login_form可以经过DevTools访谈接收器。该选取器包蕴登陆表单,因此大家应用waitForSelector措施来等待它。

然后,我们需求输入大家的emailpassword,所以我们吸引接受input#email,并input#pass从DevTools,并通过大家的SECRET_EMAILSECRET_PASSWORD

今后,大家单击#loginbutton以报到到照片墙。

最后朝气蓬勃行被批注掉,使大家见到了打字的全经过email,并password和点击登陆开关。

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

$nodesignin

那将运行全套Chromium浏览器,然后登陆推文(TweetState of Qatar。

结论

在本教程中,大家创造了贰个档案的次序,该项目成立内定视口内任何给定页面包车型大巴显示屏截图。我们还树立了三个品类,能够在中间创建任何网址的PDF。然后,我们以编制程序格局设法登陆了推特。

Puppeteer前段时间发布了本子2,它是八个很好的软件,能够通过轻松易用的API自动实践繁杂的职责。

您能够在其官方网站上询问关于Puppeteer的越多音讯。这么些文书档案相当好,有恢宏的演示,並且有所文书档案都有据可查。

到现在,使用Puppeteer能够自动履行您平时生活中无聊的天职。

本文由北京pk赛车官网下载发布于北京pk赛车网站-web前端,转载请注明出处:生成网站截图

关键词:

ECS云服务器

近期公司网络有些整顿,有些项目的服务器也要做一些相应的调整,所以处理完一些web前端开发工作之余,需要花些...

详细>>

思维导图的好处

思考导图是风流罗曼蒂克种绘制的图片,可扶持你去粗取精,而无需免强他们开展公司或社团。代替他的是,在等级...

详细>>

JavaScript 学习笔记之一jQuery写法图片等比缩放以及

JavaScript 学习笔记之生龙活虎jQuery写法图片等比缩放以至预加载在此以前对于JavaScript总是在行使的时候在页面上写多...

详细>>

1.如果我们要选择第一列并且对其样式进行改变

jQuery对表格的处理提供了相当强大的功能,比如说对表格特定行进行排序、样式改变等等。如果你的英文够好,你可...

详细>>