使用Puppeteer+Node.js时，如何获取无直接URL的导出按钮链接？

这种按钮属于前端触发式下载，点击后通过JavaScript动态生成下载请求（比如生成Blob文件、调用后端接口返回文件流），所以HTML里不会直接显示下载链接。以下是几种可行的解决方法：

方法1：直接模拟点击按钮（最简便） #

配置Puppeteer允许自动下载，直接点击按钮触发下载流程：

const puppeteer = require('puppeteer');
const fs = require('fs');

// 确保下载目录存在
const downloadDir = './downloads';
if (!fs.existsSync(downloadDir)) fs.mkdirSync(downloadDir);

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  // 设置自动下载路径，禁用保存对话框
  await page._client.send('Page.setDownloadBehavior', {
    behavior: 'allow',
    downloadPath: downloadDir
  });

  await page.goto('你的目标页面URL');

  // 通过aria-label定位按钮并点击
  await page.click('button[aria-label="Export CSV"]');

  // 等待下载完成（根据文件大小调整时长，或监听下载事件）
  await page.waitForTimeout(3000);

  await browser.close();
})();

方法2：拦截网络请求获取下载链接 #

如果需要拿到具体的下载URL，可以拦截页面的网络请求：

const puppeteer = require('puppeteer');
const axios = require('axios');
const fs = require('fs');

const downloadDir = './downloads';
if (!fs.existsSync(downloadDir)) fs.mkdirSync(downloadDir);

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  let downloadUrl = '';

  // 开启请求拦截
  await page.setRequestInterception(true);
  page.on('request', req => {
    // 识别下载请求（关键词匹配，可根据实际情况调整）
    if (req.url().includes('export') && req.url().endsWith('.csv')) {
      downloadUrl = req.url();
      console.log('获取到下载链接:', downloadUrl);
    }
    req.continue();
  });

  await page.goto('你的目标页面URL');
  await page.click('button[aria-label="Export CSV"]');

  // 等待链接获取完成
  while (!downloadUrl) {
    await page.waitForTimeout(100);
  }

  // 用axios直接下载文件
  const res = await axios({
    url: downloadUrl,
    method: 'GET',
    responseType: 'stream'
  });
  res.data.pipe(fs.createWriteStream(`${downloadDir}/export.csv`));

  await browser.close();
})();

方法3：调用页面内置JS函数生成链接 #

打开浏览器开发者工具（Vue项目可配合Vue Devtools），找到按钮绑定的点击方法，直接在Puppeteer中调用该函数获取链接：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('你的目标页面URL');

  // 调用页面内生成下载链接的函数（替换成实际函数名）
  const downloadUrl = await page.evaluate(() => {
    // 假设页面有exportCSV()方法返回下载链接
    return window.exportCSV();
  });

  console.log('生成的下载链接:', downloadUrl);

  await browser.close();
})();

内容的提问来源于stack exchange，提问作者elaachac