使用Puppeteer生成PDF出现多余白边，如何消除该问题？

解决方法 #

1. 调整Puppeteer生成PDF的配置

Puppeteer的page.pdf()方法默认会添加默认页边距，你没有显式关闭就会出现多余白边，修改配置如下：

async function printPDF() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  // setContent时添加等待参数确保HTML内容完全加载解析
  await page.setContent(html, { waitUntil: 'load' })
  const pdf = await page.pdf({
    path: 'pdf/storage/location', 
    printBackground: true, 
    height:'1080px', 
    width: '1080px',
    // 显式将所有页边距设为0
    margin: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    // 优先使用CSS定义的页面尺寸，避免渲染偏差
    preferCSSPageSize: true
  }); 
  await browser.close();
}

2. 修复HTML和CSS的问题

你当前的代码存在几处布局相关的疏漏，修改如下：

• 补充缺失的<body>标签，所有页面内容都要放在<body>内，避免非规范结构导致的渲染异常
• 重置html、body的默认边距，浏览器默认会给根元素添加边距，你仅给.page设边距为0不生效
• 全局设置box-sizing: border-box，你给头部、内容、底部设置的左右padding会在默认content-box盒模型下撑大元素宽度，导致内容溢出或者出现白边
• 给.page添加强制分页属性，确保每页独立渲染，高度固定为1080px避免百分比计算偏差

修改后的CSS部分如下：

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.page {
  margin: 0;
  padding: 0;
  /* 固定每页高度，和PDF尺寸匹配 */
  height: 1080px;
  width: 100%;
  overflow: hidden;
  /* 强制每个.page结束后分页 */
  page-break-after: always;
}

.line {
  font-size: 40px;
  font-family: roboto;
}

.center {
  margin-left: 100px;
}

.top {
  background-color: pink;
  height: 80px;
  width: 100%;
  padding:  0px 80px;
}

.content {
  background-color: green;
  width: 100%;
  height: 920px;
  padding:  0px 80px;
}

.bottom {
  background-color: blue;
  height: 80px;
  width: 100%;
  padding:  0px 80px;
}

.swipe {
  justify-content: center;
  height: 60px;
}

修改后即可生成无多余白边、尺寸符合预期的1080×1080px PDF。

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