自动设置PDF页面高度后Page size失效，HTML转PDF79mm宽度配置异常

算力阿峰

2026-10-3

可行解决方案

核心原理

@page规则的标准页面尺寸控制属性为size，直接在@page内写width/height不符合CSS规范，因此不会生效。要实现固定79mm宽度+高度自适应内容不强制分页，可按以下方案配置：

通用CSS配置

<style type="text/css" media="print">
  @page {
    /* 宽度固定79mm，高度auto自适应内容长度 */
    size: 79mm auto;
    /* 取消默认页边距，避免内容被挤压导致宽度不准 */
    margin: 0;
  }
  * {
    /* 统一盒模型，避免padding、border撑出79mm宽度 */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html, body {
    /* 双重保证内容宽度严格匹配页面宽度 */
    width: 79mm !important;
  }
  /* 如需避免特定元素内部分页，给对应元素添加该类即可，不要写在@page规则里 */
  .avoid-break {
    page-break-inside: avoid;
  }
</style>

不同生成工具的适配优化

如果所用的HTML转PDF工具不支持size属性的auto值，可对应适配：

Puppeteer/Playwright：调用page.pdf()方法时设置width: '79mm'，preferCSSPageSize: true，不要固定height参数。如果高度仍不符合预期，可先通过page.evaluate(() => document.body.scrollHeight)获取内容实际高度，动态传入height参数即可。
wkhtmltopdf：执行命令时添加参数--page-width 79 --disable-smart-shrinking，如需动态高度可先渲染内容计算出实际高度后，再传入--page-height 实际高度值参数。
浏览器原生打印另存为PDF：打印时手动将缩放设置为100%，页边距设置为「无」即可适配。