HTML转PDF异常：背景图缩小、字体溢出背景区域问题求解

背景图渲染尺寸偏小修复 #

• 全局重置打印基础规则，避免默认样式干扰
  先在CSS顶部加入打印全局配置，统一页面尺寸、清零默认边距，解决转PDF工具默认留白挤压内容的问题：

  /* 对应A4尺寸，如果你复刻的PDF是其他尺寸直接替换数值即可 */
  @page {
    size: 210mm 297mm;
    margin: 0;
  }
  html, body {
    margin: 0;
    padding: 0;
    width: 210mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  

• 背景图属性显式声明，不要用简写
  转PDF引擎（wkhtmltopdf、Puppeteer打印模块等）对background简写属性的解析经常和浏览器不一致，拆分属性固定尺寸规则，不要用cover/contain这类自适应值：

  .pdf-page {
    position: relative;
    width: 210mm;
    height: 297mm;
    background-image: url('你的背景图本地路径');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top left;
    overflow: hidden;
  }
  

• 转PDF工具参数校准
  不管用什么转换工具，都要手动把页边距参数全部设为0，禁止工具自动缩放页面适配边距：
  • Puppeteer调用page.pdf()时传入margin: {top:0, right:0, bottom:0, left:0}
  • wkhtmltopdf启动时追加参数--margin-top 0 --margin-bottom 0 --margin-left 0 --margin-right 0 --disable-smart-shrinking

字体内容溢出背景区域修复 #

• 固定字体与排版单位，避免相对单位计算偏差
  排版时不要用px/rem/vw这类屏幕端相对单位，所有尺寸、偏移、字体大小、行高全部用mm作为单位，和PDF物理尺寸对齐；同时不要依赖系统默认字体，要么引入和参考PDF一致的字体文件，要么在转PDF时开启字体嵌入，避免字体替换导致的字宽、行高变化撑破布局：

  .page-content {
    position: absolute;
    /* 数值按照你参考PDF里文本区域和背景边缘的实际距离填写 */
    left: 20mm;
    top: 25mm;
    width: 170mm;
    font-size: 3.5mm;
    line-height: 5.2mm;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
  }
  

• 避开渲染兼容性差的CSS属性
  不要用transform、flex部分高级属性、float做内容定位，大部分转PDF引擎对这类属性的渲染支持存在缺陷，内容位置偏移直接导致溢出，优先用position: absolute配合固定mm值做坐标对齐。
• 转码前等待资源加载完成
  如果用Puppeteer这类无头浏览器方案转PDF，要等页面所有字体、图片资源加载完成、字体渲染就绪后再触发转码：

  await page.goto('你的本地页面路径', {waitUntil: 'networkidle0'});
  await page.evaluate(() => document.fonts.ready);
  await page.pdf({/* 你的pdf配置 */})
  

调试时不要以屏幕端的网页预览效果为准，屏幕DPI和打印渲染DPI存在固定差异，每次调整后导出单页PDF核对尺寸即可。

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