使用Puppeteer捕获按钮点击后的动态下载URL

挑战：动态生成下载链接

在Web自动化任务中，我们经常需要从网页下载文件。然而，许多现代网站的下载按钮并不会直接在HTML中提供一个href属性指向下载链接。相反，点击按钮后，通常会通过JavaScript发送一个异步请求（XHR或Fetch），然后服务器返回一个文件流，或者重定向到一个临时的下载URL。在这种情况下，如果仅尝试解析按钮的HTML结构，将无法找到所需的下载链接。

例如，一个下载按钮可能看起来很简单，不包含任何URL信息：

<button type="button" class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--small transparent pa-0" aria-label="Export CSV" title="Export CSV" style="width: 32px; height: 32px;">
  <span class="v-btn__content">
    <i aria-hidden="true" class="v-icon notranslate mdi mdi-download theme--light primary--text">
    </i>
  </span>
</button>

面对这种情况，我们需要一种方法来“监听”按钮点击后发生的网络活动，从而捕获实际的下载请求URL。

解决方案：Puppeteer网络请求拦截

Puppeteer提供了一个强大的功能，允许我们拦截和检查页面发出的所有网络请求。通过page.waitForRequest方法，我们可以等待一个符合特定条件的网络请求，并在该请求发出时获取其详细信息，包括请求的URL。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

基本思路是：

1. 导航到目标页面。
2. 在点击下载按钮之前，开始监听网络请求。
3. 点击下载按钮。
4. 等待并捕获到预期的下载请求。
5. 从捕获到的请求对象中提取URL。

实战示例：捕获CSV文件下载链接

以下是一个使用Puppeteer捕获CSV文件下载链接的完整示例。这个例子模拟了在一个数据页面上，需要先点击一个“下载数据”按钮，然后才出现“导出CSV”按钮，最后点击“导出CSV”按钮触发文件下载的场景。

const puppeteer = require("puppeteer"); // 确保已安装 Puppeteer，例如 ^19.7.5

let browser;
(async () => {
  try {
    // 1. 启动浏览器实例
    browser = await puppeteer.launch();
    const [page] = await browser.pages(); // 获取默认页面

    // 2. 导航到目标URL
    const url = "https://data.ademe.fr/datasets/liste-des-entreprises-rge-2";
    await page.goto(url, { waitUntil: "domcontentloaded" }); // 等待DOM内容加载完成

    // 3. 定位并点击第一个触发按钮（如果存在，例如“下载数据”按钮）
    // 注意：这里的选择器需要根据实际网页调整
    const initialBtn = await page.waitForSelector('[aria-label="Téléchargement des données"]');
    await initialBtn.click();

    // 4. 关键步骤：同时等待下载请求和点击“导出CSV”按钮
    // 使用 Promise.all 确保在点击按钮的同时开始监听请求
    const [request] = await Promise.all([
      // 等待符合特定条件的网络请求
      page.waitForRequest(req =>
        // 条件1: 请求URL以.csv结尾 (通常用于直接下载文件)
        req.url().endsWith(".csv") ||
        // 条件2: 请求URL包含特定API路径 (通常用于动态数据接口)
        req.url().includes("data.ademe.fr/data-fair/api/v1/datasets/liste-des-entreprises-rge-2")
      ),
      // 定位并点击实际触发下载的按钮（例如“Export CSV”按钮）
      (await page.waitForSelector('[aria-label="Export CSV"]')).click()
    ]);

    // 5. 打印捕获到的下载链接
    console.log("捕获到的下载URL:", request.url());

  } catch (err) {
    console.error("发生错误:", err);
  } finally {
    // 6. 关闭浏览器实例
    await browser?.close();
  }
})();

代码解析与关键点

1. puppeteer.launch(): 启动一个新的浏览器实例。
2. browser.pages(): 获取所有打开的页面，[page]解构赋值获取第一个页面。
3. page.goto(url, { waitUntil: "domcontentloaded" }): 导航到指定URL。waitUntil: "domcontentloaded"表示等待页面的DOM内容加载完毕，这是一个良好的实践，确保页面元素可以被正确查找。
4. page.waitForSelector(selector): 等待页面上出现符合指定CSS选择器的元素。这确保了在尝试点击按钮之前，按钮已经存在于DOM中。
5. Promise.all([...]): 这是实现同时“监听请求”和“触发点击”的关键。
   • page.waitForRequest(...): 这个Promise会等待一个符合其回调函数条件的网络请求。回调函数req => req.url().endsWith(".csv") || req.url().includes(...)定义了我们感兴趣的请求类型。你可以根据实际情况调整这些过滤条件，例如，可以检查请求的类型（req.resourceType()）、方法（req.method()）或请求头。
   • (await page.waitForSelector(...)).click(): 这个Promise会在找到“Export CSV”按钮后立即点击它。
   • 通过将这两个操作放入Promise.all中，我们确保了waitForRequest在点击事件发生时已经处于监听状态，从而不会错过由点击触发的网络请求。
6. request.url(): 当page.waitForRequest捕获到符合条件的请求时，它会返回一个Request对象。通过调用request.url()，我们就可以获取到该请求的完整URL。

注意事项与扩展

• 请求过滤策略: page.waitForRequest的回调函数是其核心。你需要根据目标网站的实际网络行为来编写合适的过滤逻辑。常见的过滤条件包括：
  • req.url().endsWith('.csv')：匹配以特定文件扩展名结尾的URL。
  • req.url().includes('api/download')：匹配包含特定API路径的URL。
  • req.resourceType() === 'xhr' 或 'document'：根据请求的资源类型进行过滤。
  • req.method() === 'GET' 或 'POST'：根据HTTP方法进行过滤。
• 处理多个下载按钮/步骤: 如果下载过程涉及多个步骤或多个按钮，你可能需要多次使用waitForSelector和click，并在适当的时机插入waitForRequest。
• 区域差异与动态元素: 某些网站可能根据用户区域或其他因素动态改变元素的选择器或下载行为。在编写自动化脚本时，务必进行充分测试，并考虑使用更健壮的选择器（如aria-label或title属性，它们通常比class或id更稳定）。
• 实际文件下载: 捕获到URL后，如果你需要将文件下载到本地，可以结合Node.js的http/https模块或第三方库（如node-fetch或axios）来发起一个HTTP请求并将响应流保存到文件。例如，可以参考Stack Overflow上关于如何使用Node.js下载文件的示例。
• 错误处理: 在实际应用中，务必添加健壮的错误处理机制，例如使用try...catch块来捕获可能发生的网络错误、选择器超时等问题。
• Headless模式: 默认情况下，Puppeteer在无头（headless）模式下运行。如果你想看到浏览器操作过程，可以将puppeteer.launch()的headless选项设置为false。

总结

通过巧妙地结合page.waitForRequest和Promise.all，Puppeteer提供了一种优雅且强大的方式来处理那些不直接暴露下载链接的复杂下载场景。这种方法不仅限于文件下载，还可以用于捕获任何由用户交互触发的动态API请求，为Web自动化任务提供了极大的灵活性。理解并掌握网络请求拦截是进行高级Puppeteer自动化的关键技能之一。

以上就是使用Puppeteer捕获按钮点击后的动态下载URL的详细内容，更多请关注php中文网其它相关文章！