如何利用 Puppeteer 的 Evaluate 函数操作网页数据

介绍

在现代的爬虫技术中，Puppeteer 因其强大的功能和灵活性而备受青睐。Puppeteer 是一个用于控制 Chromium 或 Chrome 浏览器的 Node.js 库，提供了丰富的 API 接口，能够帮助开发者高效地处理动态网页数据。本文将重点讲解 Puppeteer 的 evaluate 函数，结合代理 IP 技术，演示如何采集目标网站（如界面新闻）上的文章标题和摘要。

界面新闻作为中国具有影响力的原创财经新媒体，其市场特点体现在内容聚合开放生产、发力短视频与直播、综合服务功能提升以及助力社会治理意识加强等方面。界面新闻通过开放平台，掌握用户数据，提升内容生产和传播的精准性，同时，短视频和直播已成为其内容生产力的重要组成部分，增强了新闻报道的即时性。此外，界面新闻客户端在版本迭代过程中，业务边界不断拓展，服务功能愈加凸显，逐渐向“新闻+政务+服务+商务”的综合性平台转型。

从新闻热点的角度来看，界面新闻客户端中信息内容同质化依旧明显，原创优质内容供应不足，但重要时政新闻、突发事件能够获得大多数媒体的关注。因此，使用 Puppeteer 的 evaluate 函数和代理 IP 技术采集界面新闻的文章标题和摘要时，可以更精准地定位到这些热点新闻，为用户提供更加丰富和深入的财经新闻内容。同时，代理 IP 技术的应用可以有效地规避网站的反爬虫机制，提高数据采集的成功率和稳定性。

通过 Puppeteer 的 evaluate 函数，开发者可以在页面的上下文中执行 JavaScript 代码，从而获取页面中的特定数据，如文章标题和摘要。结合代理 IP 技术，可以在不同的地理位置模拟用户访问，减少被目标网站封禁的风险，这对于采集界面新闻这类高质量财经新闻内容尤为重要。通过这种方式，可以为界面新闻的用户提供更加丰富和深入的财经新闻内容，满足他们对高质量信息的需求。

技术分析

Puppeteer 的 Evaluate 函数

evaluate 是 Puppeteer 的核心函数之一。通过该函数，开发者可以在浏览器上下文中执行 JavaScript 代码，直接操作 DOM 树，从而提取网页中的数据。

核心使用步骤包括：

在浏览器中打开页面。
使用 page.evaluate 在页面上下文执行自定义脚本，获取需要的数据。
将数据从浏览器上下文传递到 Node.js 脚本。

代理 IP 的使用

由于频繁的爬虫行为可能会被目标网站检测并封禁 IP 地址，因此引入代理 IP 是非常必要的。我们以爬虫代理服务为例，通过设置代理服务器的域名、端口、用户名和密码，安全稳定地采集网页数据。

实现细节

在代码中，我们将使用以下技术和工具：

设置代理 IP：使用爬虫代理服务。
自定义 Cookie 和 User-Agent：模拟真实用户行为，降低被目标网站封禁的风险。
数据存储：将提取的文章标题和摘要存储到本地文件中。

以下是完整实现代码。

实现代码

const puppeteer = require('puppeteer');

// 配置IP代理服务参数 亿牛云爬虫代理 www.16yun.cn
const PROXY_HOST = "PROXY.16yun.cn"; // 16yun代理服务器
const PROXY_PORT = "12345"; // 端口
const PROXY_USERNAME = "代理用户名"; // 例如：yourUsername
const PROXY_PASSWORD = "代理密码"; // 例如：yourPassword

// 配置目标网站和输出文件
const TARGET_URL = "https://www.jiemian.com";
const OUTPUT_FILE = "articles.json";

(async () => {
    // 启动浏览器并设置代理
    const browser = await puppeteer.launch({
        headless: true, // 无头模式
        args: [
            `--proxy-server=http://${PROXY_HOST}:${PROXY_PORT}` // 配置代理
        ]
    });

    const page = await browser.newPage();

    // 设置代理的认证信息
    await page.authenticate({
        username: PROXY_USERNAME,
        password: PROXY_PASSWORD
    });

    // 设置 User-Agent 和 Cookie
    await page.setUserAgent(
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36"
    );
    await page.setCookie({
        name: "exampleCookie",
        value: "exampleValue",
        domain: ".jiemian.com"
    });

    try {
        // 打开目标页面
        await page.goto(TARGET_URL, { waitUntil: "networkidle2" });

        // 使用 evaluate 函数提取数据
        const articles = await page.evaluate(() => {
            const data = [];
            const articleElements = document.querySelectorAll(".news-item"); // 根据界面新闻的 DOM 结构选择器
            articleElements.forEach((item) => {
                const title = item.querySelector(".news-item-title")?.innerText?.trim();
                const summary = item.querySelector(".news-item-summary")?.innerText?.trim();
                if (title && summary) {
                    data.push({ title, summary });
                }
            });
            return data;
        });

        // 将数据写入文件
        const fs = require("fs");
        fs.writeFileSync(OUTPUT_FILE, JSON.stringify(articles, null, 2), "utf-8");
        console.log(`数据已成功保存到 ${OUTPUT_FILE}`);
    } catch (error) {
        console.error("爬取过程中发生错误：", error);
    } finally {
        // 关闭浏览器
        await browser.close();
    }
})();