Heroku环境下Puppeteer生成空白PDF问题求助

我之前在Heroku部署Puppeteer PDF生成服务时，也碰到过几乎一模一样的问题——开发环境正常跑，上线后就出空白PDF，日志里也飘着那个GPU上下文丢失的错误。结合你的情况，我整理了几个针对性的解决方案，应该能帮你搞定：

1. 用page.setContent替代data:text/html的page.goto #

直接通过data:text/html协议加载HTML在Heroku的无头Chrome环境下容易出现渲染兼容性问题，换成page.setContent直接注入HTML内容更稳定可靠。把这段代码：

await page.goto(`data:text/html,${req.body.html}`, { waitUntil: 'networkidle2', });

改成：

await page.setContent(req.body.html, { waitUntil: 'networkidle2' });

2. 添加GPU禁用和资源优化的启动参数 #

Heroku的容器环境对GPU支持有限，日志里的Lost UI shared context错误就是明确信号。在Puppeteer启动时添加这些参数，彻底规避GPU相关问题，同时优化资源使用：

const browser = await puppeteer.launch({ 
  dumpio: true, 
  headless: true, 
  args: [
    '--no-sandbox', 
    '--disable-setuid-sandbox',
    '--disable-gpu', // 禁用GPU加速，解决上下文丢失问题
    '--disable-dev-shm-usage', // 解决Heroku共享内存不足的潜在问题
    '--single-process' // 强制单进程运行，减少资源冲突
  ] 
});

3. 用精准的等待策略替代固定延时 #

你加的page.waitFor(6000)是临时调试手段，但换成等待页面核心元素可见会更可靠，确保页面完全渲染完成：

await page.waitForSelector('body', { visible: true });

修改后的完整代码 #

const generatePDF = asyncMiddleware(async (req, res) => { 
  const browser = await puppeteer.launch({ 
    dumpio: true, 
    headless: true, 
    args: [
      '--no-sandbox', 
      '--disable-setuid-sandbox',
      '--disable-gpu',
      '--disable-dev-shm-usage',
      '--single-process'
    ] 
  }); 
  const page = await browser.newPage(); 
  page.on('error', err => { 
    console.error('err', err, err.stack);
    browser.close(); 
  }); 

  await page.setContent(req.body.html, { waitUntil: 'networkidle2' }); 
  await page.waitForSelector('body', { visible: true });

  const pdf = await page.pdf(); 
  res.set('content-type', 'application/pdf'); 
  await browser.close(); 
  res.send(pdf); 
}); 

module.exports = require('express').Router().post('/', generatePDF);

这些调整都是针对Heroku无头Chrome的环境特性做的，应该能解决你遇到的空白PDF问题。你提到的那两个issue本质上也是无头环境下的渲染兼容性问题，上面的参数和方法正好对应解决这些场景。

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