如何使用Puppeteer下载Blob URL对应的PDF？（非无头模式）

嘿，这个问题我刚好有经验！当点击下载按钮后打开了以blob:开头的PDF标签页，在headless: false模式下，不管是手动操作还是自动化处理，都有可行的办法：

因为是非无头模式，浏览器界面完全可见，直接操作就行：

• 切换到新打开的PDF标签页，按下快捷键Ctrl+S（Windows/Linux）或者Cmd+S（Mac），弹出系统保存对话框后，选好本地路径就能完成保存。
• 也可以右键点击PDF内容区域，选择**另存为...**选项，同样能触发保存流程。

如果你想用代码实现自动下载，不用手动点来点去，以Puppeteer为例可以这么做：

1. 先监听浏览器新标签页的创建事件，筛选出URL以blob:开头的目标页面；
2. 在该标签页的上下文里，通过fetch获取blob格式的PDF数据，再转换成可写入本地的Buffer；
3. 用文件系统模块把Buffer写入本地文件。

给你一段参考代码：

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

(async () => {
  // 启动非无头模式的浏览器
  const browser = await puppeteer.launch({ headless: false });
  const mainPage = await browser.newPage();
  
  // 导航到目标页面（替换成你的实际页面URL）
  await mainPage.goto('https://your-target-page.com');
  
  // 监听新标签页创建
  browser.on('targetcreated', async (target) => {
    const pageUrl = target.url();
    // 筛选出blob开头的PDF页面
    if (pageUrl.startsWith('blob:')) {
      const pdfPage = await target.page();
      // 在PDF页面中获取blob数据并转成Buffer
      const pdfBuffer = await pdfPage.evaluate(async () => {
        const res = await fetch(window.location.href);
        const blob = await res.blob();
        const arrayBuffer = await blob.arrayBuffer();
        return Buffer.from(arrayBuffer);
      });
      // 写入本地文件（路径可以自定义）
      await fs.writeFile('./my-statement.pdf', pdfBuffer);
      console.log('PDF已成功保存到本地！');
      // 可选：关闭PDF标签页
      await pdfPage.close();
    }
  });
  
  // 点击下载按钮（替换成你的下载按钮选择器）
  await mainPage.click('#download-statement-btn');
  
  // 按需关闭浏览器，这里可以根据保存逻辑调整时机
  // await browser.close();
})();

• 确保你的代码有本地文件系统的写入权限，不然会出现权限报错；
• blob格式的URL通常有有效期，要尽快处理，避免链接失效；
• 不同浏览器的右键菜单或快捷键可能略有差异，但核心的保存逻辑是一致的。

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