使用Puppeteer生成PDF时出现白边问题求助

你已经在PDF配置里设了margin: {top: '0px',right: '0px',bottom: '0px',left: '0px'}但仍出现白边，大概率是页面默认样式或viewport不匹配导致的，试试下面几个方案：

1. 重置页面默认CSS样式 #

浏览器默认会给html、body标签添加margin或padding，直接注入CSS清除这些默认样式：

await page.addStyleTag({
  content: `
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
    }
  `
});

2. 匹配PDF尺寸设置viewport #

确保页面viewport和你设置的PDF宽高完全一致，避免内容缩放或留白：

await page.setViewport({
  width: 650, // 和PDF配置的width一致
  height: 800, // 和PDF配置的height一致
  deviceScaleFactor: 1
});

3. 调整PDF生成配置细节 #

• 将preferCSSPageSize设为false，强制使用你指定的宽高（该选项有时会和页面CSS冲突）
• 保持printBackground: true，避免因背景未渲染导致视觉上的白边

修改后的完整代码示例：

await page.setViewport({
  width: 650,
  height: 800,
  deviceScaleFactor: 1
});

await page.addStyleTag({
  content: `
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
    }
  `
});

const pdf = await page.pdf({
  path: './pdf/white_border_3.pdf',
  printBackground: true,
  preferCSSPageSize: false,
  height: '800px',
  width: '650px',
  scale: 1,
  margin: {top: '0px',right: '0px',bottom: '0px',left: '0px'}
});

额外排查点 #

如果还是有白边，检查页面内的容器元素（如div）是否设置了margin/padding，确保它们的尺寸为100%且无额外边距。

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