Puppeteer生成PDF时元素高度与Next.js页面不一致问题排查

我用Puppeteer生成PDF时，通过ReactDOMServer.renderToString渲染React组件，再调用setContent注入到页面。但发现Next.js应用里的组件和Puppeteer生成PDF流程中相同组件的元素高度不一致（项目没设置height，应为auto），导致网页预览PDF时效果和实际页面不一样。

相关代码 #

Puppeteer代码 #

const browser = await puppeteer.launch({ headless: false });
const htmlString = ReactDOMServer.renderToString(
  <>
    <div style={{ height: 500, width: 500 }}>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <span>HASS1</span>
        <span>HASS2</span>
        <span>HASS3</span>
      </div>
    </div>
  </>,
);
await page.setContent(htmlString);
await page.setViewport({ width: 1920, height: 1080 });
await page.emulateMediaType('screen');
await page.waitForSelector('#footer-is-loaded');
const pdfBuffer = await page.pdf({ format: 'A4' });
...

Next.js应用代码 #

const TestPage = props => {
  return (
    <div style={{ height: 500, width: 500 }}>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <span>HASS1</span>
        <span>HASS2</span>
        <span>HASS3</span>
      </div>
    </div>
  );
};

问题原因与修正方案 #

1. 缺失全局样式与基础重置 #

Next.js默认会注入项目的全局样式（比如重置样式、字体、line-height等），但ReactDOMServer.renderToString只渲染组件本身的结构，没有包含这些全局样式。Puppeteer加载的裸HTML没有这些样式，导致元素默认样式（如margin、padding、字体大小）和Next.js页面不一致，直接影响高度计算。

修正：在渲染的HTML中注入和项目一致的全局样式：

// 复制项目的全局重置样式和字体配置
const globalStyles = `
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
  }
`;

const htmlString = ReactDOMServer.renderToString(
  <>
    <style>{globalStyles}</style>
    {/* 原组件内容 */}
  </>,
);

2. 页面环境配置顺序错误 #

你是先注入HTML再设置viewport和媒体类型，这会导致页面渲染时用的是Puppeteer默认的环境参数，后续修改viewport会触发重排，可能导致布局偏差。

修正：先配置页面环境，再注入HTML：

const page = await browser.newPage();
// 先设置视口和媒体类型
await page.setViewport({ width: 1920, height: 1080 });
await page.emulateMediaType('screen');
// 再注入HTML
await page.setContent(htmlString);

3. PDF格式与视口不匹配 #

你设置了1920x1080的视口，但生成PDF用的是A4格式，两者尺寸差异会导致页面缩放，影响元素高度。

修正：要么让PDF尺寸匹配视口，要么确保缩放比例一致：

const pdfBuffer = await page.pdf({ 
  format: 'A4',
  printBackground: true,
  scale: 1, // 强制缩放比例为1，避免自动缩放
  width: '1920px', // 或者直接指定和视口一致的宽度
  height: '1080px'
});

4. 无效的等待条件 #

代码中waitForSelector('#footer-is-loaded')，但你的示例组件里没有这个元素，会导致等待超时或提前生成PDF，布局未完全稳定。

修正：等待组件内实际存在的元素：

await page.waitForSelector('div > div > span');

额外建议 #

• 如果项目用了自定义字体，要在Puppeteer的HTML中引入字体文件，保证渲染时字体一致。
• 可以直接让Next.js生成完整页面HTML（比如用getServerSideProps或静态导出），再用Puppeteer加载这个页面，完全复用项目的样式和环境，避免手动同步样式的麻烦。
• 用Chrome DevTools对比Next.js页面和Puppeteer页面的元素computed样式，找出差异的具体属性（如line-height、font-size），针对性补充样式。

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