Puppeteer让你网页操作更简单(1)屏幕截图

网页自动化设计爬虫工具 中就使用了Puppeteer进行对网页自动化处理,今天就来看看它是什么东西!

我们将学习什么?

在本教程中,您将学习如何使用JavaScript自动化和抓取 web。 为此,我们将使用Puppeteer。 Puppeteer是一个Node库API,允许我们控制无头Chrome。 无头Chrome是运行Chrome浏览器而不实际运行Chrome的一种方式。

如果这都没有任何意义,您真正需要知道的就是我们将编写将自动化Google Chrome的JavaScript代码。

在开始之前

在开始之前,您的电脑上需要安装Node 8+。 您可以在此处安装它。 请确保选择"Current"版本,因为它是8+。

如果您以前从未使用过Node并想学习它,请查看:[学习Node JS ------ 3个最佳在线Node JS课程](https://codeburst.io/learn-node- js-the-3-best-online-node-js-courses-87e5841f4c47)。

安装Node后,创建一个新项目文件夹并安装Puppeteer。 Puppeteer随附了一个与API兼容的最新版本的Chromium:

复制代码
npm install --save puppeteer

例1 ------ 拍摄屏幕截图

安装Puppeteer后,我们将首先走through一个简单的示例。 此示例直接来自Puppeteer文档(仅做少量更改)。 我们将浏览的代码将为您告知的任何网站拍摄屏幕截图。

首先,创建一个名为test.js的文件,并复制以下代码:

复制代码
const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

让我们逐行浏览这个示例。

  • 第1行: 我们需要之前安装的Puppeteer依赖项
  • 第3-10行: 这是我们的main函数getPic()。 这个函数将保存我们所有的自动化代码。
  • **第12行:**在第12行上,我们正在调用我们的getPic()函数。 (运行功能)。

需要注意的重要一点是我们的getPic()函数是一个async函数,并使用新的ES 2017 async/await功能。 由于此函数是异步的,因此在调用时它返回一个Promise。 当async函数最终返回一个值时,Promise将解析(如果错误,则Reject)。

由于我们使用了async函数,因此我们可以使用await表达式,该表达式将暂停函数执行并等待Promise解析然后再继续。 如果现在还不明白也没关系。 随着教程的继续,这将变得更加清晰。

现在我们已经概述了main函数,让我们深入研究其内部工作原理:

  • 第4行:

    const browser = await puppeteer.launch();

这是我们实际启动puppeteer的地方。 我们本质上是启动了一个Chrome实例并将其设置为我们新创建的browser变量。 因为我们也使用了await关键字,所以函数将在这里暂停,直到我们的Promise解析(直到我们成功创建了我们的Chrome实例,或者错误)

  • 第5行:

    const page = await browser.newPage();

在这里,我们在自动化浏览器中创建一个新页面。 我们等待新页面打开并将其保存到我们的page变量中。

使用我们在上一行代码中创建的page,我们现在可以告诉我们的page导航到一个URL。 在这个例子中,我们正在导航到谷歌。 我们的代码将暂停,直到页面加载完毕。

  • 第7行:

    await page.screenshot({path: 'google.png'});

现在我们告诉Puppeteer拍摄当前页面的屏幕截图。 screenshot()方法以对象作为参数,我们可以在其中自定义我们的.png屏幕截图的保存位置。 同样,我们使用了await关键字,所以我们的代码在操作发生时会暂停。

  • 第9行:

    await browser.close();

最后,我们已经到达getPic()函数的末尾,我们关闭browser

运行示例

您可以使用Node运行上面的示例代码:

复制代码
node test.js

这是生成的屏幕截图:

太棒了! 为了增加更多乐趣(和更容易的调试),我们可以以非无头方式运行我们的代码。

这确切地意味着什么? 自己试试看。 将代码中的第4行从此更改:

复制代码
const browser = await puppeteer.launch();

至此:

复制代码
const browser = await puppeteer.launch({headless: false}); 

然后用Node再次运行:

复制代码
node test.js

相当酷吧? 当我们运行{headless: false}时,您可以实际观察Google Chrome按指示浏览代码的工作方式。

在继续之前,我们将对此代码执行最后一项操作。 还记得我们的截图有点偏离中心吗? 好吧,那是因为我们的页面有点小。 我们可以通过添加这行代码来更改页面大小:

复制代码
await page.setViewport({width: 1000, height: 500})

这会产生更好看的截图:

这是此示例的最终代码:

复制代码
const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.setViewport({width: 1000, height: 500})
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();
相关推荐
山河木马5 分钟前
前端学习C++之:创建对象
前端·javascript·c++
汪子熙9 分钟前
web 应用本地开发中的 LiveReload 协议深度解析
前端·javascript
UI设计和前端开发从业者10 分钟前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
全宝24 分钟前
前端也能这么丝滑!Node + Vue3 实现 SSE 流式文本输出全流程
前端·javascript·node.js
前端小巷子37 分钟前
Web缓存:原理、策略与优化
前端·面试
小磊哥er39 分钟前
【前端工程化】前端工作中如何协同管理开发任务?
前端
程序员小白条44 分钟前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展
编程大全44 分钟前
2025年前端面试题
前端
萌萌哒草头将军1 小时前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js
LuciferHuang8 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug