如何使用Puppeteer在Node JS服务器上实现动态网页抓取

本文涉及的产品
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
实时计算 Flink 版,5000CU*H 3个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: Puppeteer的核心功能是提供了一个Browser类,它可以启动一个Chrome或Chromium浏览器实例,并返回一个Browser对象。Browser对象可以创建多个Page对象,每个Page对象对应一个浏览器标签页,可以用来加载和操作网页。Page对象提供了一系列的方法,可以模拟用户的各种行为,如输入、点击、滚动、截图、PDF等。Page对象还可以监听网页上的事件,如请求、响应、错误、加载等。通过这些方法和事件,可以实现对动态网页的抓取。

亿牛云代理

导语

动态网页抓取是指通过模拟浏览器行为,获取网页上的动态生成的数据,如JavaScript渲染的内容、Ajax请求的数据等。动态网页抓取的难点在于如何处理网页上的异步事件,如点击、滚动、等待等。Puppeteer是一个基于Node JS的库,它提供了一个高级的API,可以控制Chrome或Chromium浏览器,实现动态网页抓取。本文将介绍如何使用Puppeteer在Node JS服务器上实现动态网页抓取,并给出一个简单的案例。

概述

Puppeteer的核心功能是提供了一个Browser类,它可以启动一个Chrome或Chromium浏览器实例,并返回一个Browser对象。Browser对象可以创建多个Page对象,每个Page对象对应一个浏览器标签页,可以用来加载和操作网页。Page对象提供了一系列的方法,可以模拟用户的各种行为,如输入、点击、滚动、截图、PDF等。Page对象还可以监听网页上的事件,如请求、响应、错误、加载等。通过这些方法和事件,可以实现对动态网页的抓取。

正文

要使用Puppeteer进行动态网页抓取,首先需要安装Puppeteer库。可以通过npm或yarn来安装:

// 使用npm安装
npm i puppeteer

// 使用yarn安装
yarn add puppeteer

安装完成后,就可以在Node JS代码中引入Puppeteer库,并使用它来启动浏览器和创建页面:

// 引入puppeteer库
const puppeteer = require('puppeteer');

// 启动浏览器并创建页面
(async () => {
   
   
  // 启动浏览器,可以传入一些选项,如无头模式、代理等
  const browser = await puppeteer.launch({
   
   
    headless: false, // 是否无头模式,默认为true
    args: ['--proxy-server=http://username:password@domain:port'] // 设置代理服务器,使用亿牛云爬虫代理的域名、端口、用户名、密码
  });

  // 创建页面
  const page = await browser.newPage();
})();

创建页面后,就可以使用page对象的方法来加载和操作网页。例如,可以使用page.goto(url)方法来访问一个网址,并等待网页加载完成:

// 访问一个网址,并等待网络空闲(即没有超过500ms的请求)
await page.goto('https://www.example.com', {
   
   waitUntil: 'networkidle0'});

然后,可以使用page.evaluate(pageFunction, ...args)方法来在浏览器中执行一些JavaScript代码,并返回结果。例如,可以获取网页上的某个元素的文本内容:

// 获取网页上的h1元素的文本内容
const h1Text = await page.evaluate(() => {
   
   
  return document.querySelector('h1').textContent;
});

除了evaluate方法外,page对象还提供了一些其他的方法来获取和操作网页上的元素,如page.$(selector)、page.$$(selector)、page.click(selector)、page.type(selector, text)等。例如,可以模拟用户在搜索框中输入关键词,并点击搜索按钮:

// 在搜索框中输入关键词
await page.type('#search-input', 'puppeteer');

// 点击搜索按钮
await page.click('#search-button');

有时候,我们需要等待一些异步事件发生后再进行下一步操作,如等待某个元素出现、等待某个请求完成等。这时候,我们可以使用page.waitFor(selectorOrFunctionOrTimeout, options, ...args)方法来设置等待条件。例如,可以等待搜索结果的列表出现后再获取其内容:

// 等待搜索结果的列表出现
await page.waitFor('#search-results');

// 获取搜索结果的列表的文本内容
const resultsText = await page.evaluate(() => {
   
   
  return document.querySelector('#search-results').textContent;
});

最后,当我们完成了对网页的抓取,我们可以使用page.screenshot(options)或page.pdf(options)方法来保存网页的截图或PDF文件。例如,可以将网页保存为png格式的图片:

// 将网页保存为png格式的图片
await page.screenshot({
   
   path: 'example.png'});

当我们不再需要浏览器和页面时,我们可以使用browser.close()方法来关闭浏览器:

// 关闭浏览器
await browser.close();

案例

下面给出一个简单的案例,使用Puppeteer在Node JS服务器上实现动态网页抓取。该案例的目标是访问百度首页,输入关键词“puppeteer”,点击搜索按钮,等待搜索结果出现,并将搜索结果的第一条链接的标题和网址保存到一个文件中。

// 引入puppeteer库和fs库(用于文件操作)
const puppeteer = require('puppeteer');
const fs = require('fs');

// 定义一个异步函数,用于执行动态网页抓取
(async () => {
   
   
  // 启动浏览器,设置代理服务器为亿牛云爬虫代理的域名、端口、用户名、密码
  const browser = await puppeteer.launch({
   
   
    args: ['--proxy-server=http://16YUN:16IP@www.16yun.cn:3100']
  });

  // 创建页面
  const page = await browser.newPage();

  // 访问百度首页,并等待网络空闲
  await page.goto('https://www.baidu.com', {
   
   waitUntil: 'networkidle0'});

  // 在搜索框中输入关键词“puppeteer”
  await page.type('#kw', 'puppeteer');

  // 点击搜索按钮
  await page.click('#su');

  // 等待搜索结果的列表出现
  await page.waitFor('#content_left');

  // 获取搜索结果的第一条链接的标题和网址
  const firstResult = await page.evaluate(() => {
   
   
    // 获取第一条链接的元素
    const firstLink = document.querySelector('#content_left .result.c-container a');
    // 返回标题和网址
    return {
   
   
      title: firstLink.innerText,
      url: firstLink.href
    };
  });

  // 将标题和网址保存到一个文件中
  fs.writeFileSync('result.txt', `${firstResult.title}\n${firstResult.url}`);

  // 关闭浏览器
  await browser.close();
})();

结语

本文介绍了如何使用Puppeteer在Node JS服务器上实现动态网页抓取,并给出了一个简单的案例。Puppeteer是一个强大而灵活的库,可以用来处理各种复杂的动态网页抓取场景。使用Puppeteer进行动态网页抓取时,需要注意以下几点:

  • 设置合适的代理服务器,以避免被目标网站屏蔽或限制。可以使用亿牛云爬虫代理提供的高质量的代理IP,提高爬虫效果。
  • 设置合适的等待条件,以确保网页上的异步事件完成后再进行下一步操作。可以使用page.waitFor方法来设置等待条件,如元素、函数、时间等。
  • 设置合适的异常处理,以应对可能发生的错误或异常。可以使用try...catch语句来捕获和处理错误或异常。

希望本文对你有所帮助,如果你有任何问题或建议,请在下面留言。谢谢!

相关文章
|
7天前
|
数据采集 JavaScript 搜索推荐
服务器端渲染(SSR)(Nuxt+Next.js)
服务器端渲染(SSR)技术在服务器上生成页面HTML,提升首屏加载速度和SEO效果。Nuxt.js和Next.js分别是基于Vue.js和React.js的流行SSR框架。Nuxt.js提供自动化路由管理、页面级数据获取和布局系统,支持SSR和静态站点生成。Next.js支持SSR、静态生成和文件系统路由,通过`getServerSideProps`和`getStaticProps`实现数据获取。SSR的优点包括首屏加载快、SEO友好和适合复杂页面,但也会增加服务器压力、开发限制和调试难度。选择框架时,可根据项目需求和技术栈决定使用Nuxt.js或Next.js。
|
9天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
24 1
|
14天前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
11天前
|
缓存 负载均衡 监控
性能优化:Node.js高效服务器开发技巧与最佳实践
【10月更文挑战第29天】在Node.js服务器开发中,性能优化至关重要。本文介绍了几种高效开发的最佳实践,包括使用缓存策略、采用异步编程、实施负载均衡和性能监控。通过示例代码展示了如何实现这些技术,帮助开发者构建更快、更稳定的Node.js应用。
29 2
|
14天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
18天前
|
JavaScript 前端开发 开发工具
Node.js——初识Node.js
Node.js——初识Node.js
18 4
|
19天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
18 4
|
28天前
|
缓存 监控 JavaScript
Node.js中基于node-schedule实现定时任务之详解
Node.js中基于node-schedule实现定时任务之详解
79 0
|
28天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
16 0
|
JavaScript 前端开发 数据格式
javascript如何向服务器发送请求
javascript中向服务器发送http请求借助的是XMLHttpRequest对象,其他一些库如JQuery对http的请求应该是在这个上面的封装,创建XMLHTPRequest对象用下面的语句: function createXMLHttpRequest() { var xmlHttp; if (window.
1135 0