如何通过Puppeteer获取页面中嵌入的PDF文件？

我之前也碰到过类似的问题，你遇到的空白PDF显示“Couldn't load plugin”，本质是因为页面用<embed>标签加载PDF时，Puppeteer默认的Chromium环境没有启用PDF插件，或者生成PDF时插件还没完成加载。这里给你两个靠谱的解决方案：

方案一：直接请求PDF源URL（推荐） #

既然你已经知道嵌入的PDF源地址是https://www.thesourceurl.com，完全没必要绕弯子渲染带<embed>的页面，直接访问这个PDF地址再生成副本更稳定，还能避免插件依赖问题。代码示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 直接访问PDF的源链接，等待加载完成
  await page.goto('https://www.thesourceurl.com', {
    waitUntil: 'networkidle0' // 确保网络请求全部完成
  });
  
  // 生成PDF文件
  await page.pdf({ 
    path: 'output.pdf', 
    format: 'A4',
    printBackground: true // 保留背景样式（如果需要的话）
  });
  
  await browser.close();
})();

方案二：启用Chromium的PDF插件（适合必须渲染嵌入页面的场景） #

如果你必须通过原页面生成PDF（比如页面还有其他自定义内容），可以在启动Puppeteer时配置Chromium启用PDF插件，并且等待插件加载就绪后再生成PDF：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--enable-plugin-pdf',
      '--plugin-pdf-viewer=enabled',
      '--no-sandbox' // 部分环境可能需要这个参数避免权限问题
    ]
  });
  const page = await browser.newPage();
  
  await page.goto('你的嵌入页面地址', {
    waitUntil: 'networkidle0'
  });
  
  // 等待PDF插件加载完成，检查插件的就绪状态
  await page.waitForFunction(() => {
    const embed = document.getElementById('plugin');
    return embed && embed.getPlugin?.()?.readyState === 4; // 4代表插件加载完成
  }, { timeout: 30000 }); // 超时时间设长一点，确保PDF能加载完
  
  await page.pdf({ path: 'output.pdf', format: 'A4' });
  await browser.close();
})();

注意：第二种方法可能会因为Chromium版本差异出现兼容性问题，比如部分新版本的Chromium对插件参数有调整，所以优先推荐第一种方案。

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