如何用Puppeteer捕获并重命名Angular动态生成的PDF文件

需求：触发Angular应用内的PDF下载按钮后，在文件写入磁盘前直接重命名，避免事后操作文件系统（如查找、重命名已下载文件）。现有代码用Puppeteer触发下载，但无法捕获动态生成的PDF流。

现有触发代码：

//Download PDF
await secondTab.waitForSelector('img[title="Format PDF"]', { visible: true, timeout : 10000 })
await secondTab.waitForTimeout(10000);
var current_element = await secondTab.$('img[title="Format PDF"]');
var parent_node = await current_element.getProperty('parentNode');
await parent_node.click();
console.log("Downloading PDF");

解决方案：拦截网络响应捕获PDF流 #

动态生成的PDF通常是通过后端接口返回二进制流实现的，点击下载按钮后页面会发起对应的请求。可以通过Puppeteer的page.on('response')事件拦截该响应，直接获取二进制数据并写入自定义文件名的文件。

修改后的代码示例：

const fs = require('fs');

// 定义自定义文件名
const targetFileName = '自定义名称的PDF文件.pdf';

// 监听页面响应，捕获PDF流
secondTab.on('response', async (response) => {
  // 筛选PDF类型的响应
  const contentType = response.headers()['content-type'];
  if (contentType && contentType.includes('application/pdf')) {
    // 获取响应的二进制缓冲区
    const pdfBuffer = await response.buffer();
    // 写入自定义文件
    fs.writeFileSync(targetFileName, pdfBuffer);
    console.log(`PDF已保存为：${targetFileName}`);
  }
});

// 原有触发下载的逻辑
await secondTab.waitForSelector('img[title="Format PDF"]', { visible: true, timeout: 10000 });
await secondTab.waitForTimeout(10000);
const currentElement = await secondTab.$('img[title="Format PDF"]');
const parentNode = await currentElement.getProperty('parentNode');
await parentNode.click();
console.log("触发PDF下载，等待捕获流...");

补充说明 #

• 如果页面存在多个PDF请求，可以通过响应的URL路径、请求方法等额外条件过滤，比如：

  if (contentType.includes('application/pdf') && response.url().includes('generate-pdf')) {
    // 处理逻辑
  }
  

• 确保fs模块已正确引入，若使用ES模块则需用import fs from 'fs'替代require。
• 此方法跳过了浏览器默认的下载流程，直接从网络层获取数据，无需依赖浏览器的下载目录设置。

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