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

导语

动态网页抓取是指通过模拟浏览器行为,获取网页上的动态生成的数据,如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来安装:

javascript 复制代码
// 使用npm安装
npm i puppeteer

// 使用yarn安装
yarn add puppeteer

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

javascript 复制代码
// 引入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)方法来访问一个网址,并等待网页加载完成:

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

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

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

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

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

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

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

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

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

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

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

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

javascript 复制代码
// 关闭浏览器
await browser.close();

案例

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

javascript 复制代码
// 引入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语句来捕获和处理错误或异常。

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

相关推荐
和你一起去月球几秒前
TypeScript - 函数(下)
javascript·git·typescript
_Legend_King6 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
余生H8 分钟前
transformer.js(三):底层架构及性能优化指南
javascript·深度学习·架构·transformer
景天科技苑22 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
石小石Orz30 分钟前
Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~
javascript·人工智能·算法
小行星12533 分钟前
前端预览pdf文件流
前端·javascript·vue.js
join834 分钟前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星12539 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
土豆湿1 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript