在Node.js中使用Puppeteer生成PDF时的尺寸异常问题

以下是针对你问题的具体修复方案：

1. 清空PDF默认边距 #

Puppeteer的page.pdf()方法默认带有边距，这是导致四周空白的核心原因之一，直接在配置中强制设置所有边距为0：

const pdf = await page.pdf({
  scale: 1.0,
  height: height + 'px',
  width: width + 'px',
  printBackground: true,
  landscape: true,
  margin: { top: 0, right: 0, bottom: 0, left: 0 } // 新增边距重置配置
});

2. 修正页面尺寸计算逻辑 #

当前的尺寸计算可能未等待内容完全渲染，或未匹配初始视口，调整为以下流程：

await page.setContent(cData);
// 先设置初始视口，确保内容正常渲染
await page.setViewport({ width: 1200, height: 800 });
// 等待内容加载完成（如果有图片/异步组件，可替换为waitForNetworkIdle或waitForSelector）
await page.waitForTimeout(500);
// 获取准确的内容滚动宽高（比offsetHeight更贴合实际内容尺寸）
const height = await page.evaluate(() => document.body.scrollHeight);
const width = await page.evaluate(() => document.body.scrollWidth);

3. 重置HTML模板的默认样式 #

你的HTML模板可能自带浏览器默认的边距/内边距，在invoice-pdf模板的样式中添加全局重置：

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
/* 确保内容容器占满整个页面 */
.invoice-content {
  width: 100%;
  height: 100%;
}

4. 启用CSS页面尺寸优先 #

如果你的HTML模板中已经通过@page规则定义了页面尺寸，开启preferCSSPageSize让Puppeteer优先使用CSS设置：

const pdf = await page.pdf({
  scale: 1.0,
  printBackground: true,
  landscape: true,
  margin: { top: 0, right: 0, bottom: 0, left: 0 },
  preferCSSPageSize: true // 启用CSS页面尺寸优先级
});

5. 微调scale参数适配 #

如果内容仍未填满页面，可尝试微调scale参数（比如0.95或1.05），同时确保宽高与landscape模式匹配：

const pdf = await page.pdf({
  scale: 0.95, // 根据实际渲染效果调整
  printBackground: true,
  landscape: true,
  margin: { top: 0, right: 0, bottom: 0, left: 0 },
});

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