Puppeteer导出PDF文件时图片无法正常渲染问题咨询

可直接落地的修复方案 #

• 给page.setContent添加baseURL参数
  调用setContent加载HTML字符串时，未指定静态资源的基准地址，Chromium的打印进程无法正常解析本地域名的资源路径，补充对应参数即可：

  await page.setContent(content, { 
    waitUntil: "networkidle0",
    baseURL: "http://localhost:6666/" // 填写你的静态资源服务根地址
  });
  

  如果补充后仍未解决，可在puppeteer启动参数里加--disable-web-security临时关闭跨域校验，排查是否是跨域拦截导致打印进程无法加载资源。
• 替换硬等待逻辑，显式确认所有图片加载完成
  固定等待2秒不可靠，添加代码校验所有图片加载状态：

  // 等待所有img元素加载完成
  await page.waitForSelector('img');
  await page.evaluate(async () => {
    const images = Array.from(document.querySelectorAll('img'));
    await Promise.all(images.map(img => {
      if (img.complete) return Promise.resolve();
      return new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
      })
    }))
  });
  

• 补充PDF导出的兼容参数
  给page.pdf添加打印配置，适配SVG等矢量资源渲染：

  await page.pdf({ 
    path: "F:\\Desktop\\file.pdf", 
    format: "a4",
    printBackground: true, // 开启资源渲染适配
    preferCSSPageSize: true
  });
  

• 可选兜底方案：把图片转成base64嵌入HTML
  如果上述方法都不生效，直接把icon_file.svg转成base64字符串，替换img的src属性，完全跳过网络请求环节即可正常渲染。

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