使用Puppeteer .setContent生成PDF时出现空白页面问题求助

问题场景 #

使用Puppeteer 19.5.2在Express后端生成PDF Buffer并返回前端，前端转Blob后下载，但每次得到空白PDF页面。通过page.content()确认页面内容正常，当前使用无头模式。

后端代码 #

export default async function generatePDF(req, res): Promise<void> {
  const params = req.body;

  const browser = await puppeteer.launch({
    defaultViewport: { width: 794, height: 1123 },
    headless: true,
  });
  const page = await browser.newPage();
  await page.setContent(generateHTML(params), {
    waitUntil: ['domcontentloaded', 'networkidle0', 'networkidle2'],
  });
  //const content = await page.content();
  //console.log(content, 'content');

  await page.addStyleTag({ content: STYLES });
  await page.waitForSelector('div', { visible: true });

  await page.emulateMediaType('screen');
  const pdf = await page.pdf({
    margin: { top: 10, bottom: 10, right: 10, left: 10 },
    width: '794px',
    height: '1123px',
  });

  await browser.close();
  res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length });
  res.send(pdf);
}

function generateHTML(params): string {
  return `<div class="wrapper">
    <p>${params.username}</p>
    <p>${params.selectedDepartment}</p>
    <p>${params.selectedPositionName}</p>
  </div>
  `;
}
const STYLES = `
.wrapper {
  width: 794px;
  background-color: red;
}
`;

前端代码 #

const pdf = await downloadPDF(info);
const blob = new Blob([pdf.data], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = `your-file-name.pdf`;
link.click();

解决方法 #

1. 调整样式加载方式 #

page.setContent会重置整个页面，后续添加的样式可能未被正确应用。直接将样式嵌入生成的HTML中：

修改generateHTML函数：

function generateHTML(params): string {
  return `
    <style>${STYLES}</style>
    <div class="wrapper">
      <p>${params.username}</p>
      <p>${params.selectedDepartment}</p>
      <p>${params.selectedPositionName}</p>
    </div>
  `;
}

同时删除后端代码中的await page.addStyleTag({ content: STYLES });行。

2. 优化页面渲染等待逻辑 #

• 等待更具体的选择器（如.wrapper），确保目标内容已渲染：

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

• 可选：添加短暂延迟给页面渲染留足时间（适合复杂内容）：

await page.waitForTimeout(1000); // 延迟1秒，视情况调整

3. 修正无头模式配置 #

Puppeteer 19+默认的headless: true对应新的无头模式，部分场景下渲染存在兼容性问题。尝试切换为旧无头模式或关闭无头测试：

const browser = await puppeteer.launch({
  defaultViewport: { width: 794, height: 1123 },
  headless: 'old', // 切换为旧无头模式
  // 或 headless: false, // 关闭无头，直观查看页面渲染情况
});

4. 调整PDF生成参数 #

• 添加printBackground: true确保背景色和样式生效：

const pdf = await page.pdf({
  margin: { top: 10, bottom: 10, right: 10, left: 10 },
  width: '794px',
  height: '1123px',
  printBackground: true,
});

• 移除page.emulateMediaType('screen')，PDF生成默认使用print媒体类型，强制切换可能导致样式异常。

5. 前端确保正确接收二进制数据 #

如果使用axios等库发起请求，需指定responseType: 'arraybuffer'，避免数据被自动解析为JSON：

async function downloadPDF(info) {
  return axios.post('/generate-pdf', info, {
    responseType: 'arraybuffer', // 关键配置
  });
}

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