@page尺寸CSS规则异常表现及浏览器PDF导出问题

问题描述 #

无法使用svg2pdf、cairosvg等库，只能通过Edge/Chrome的「另存为PDF」功能将SVG转为PDF。已通过@page的size属性指定与SVG完全一致的尺寸（1152px×1599.84px），并设置页边距为0，但生成的PDF仍会出现两页。

异常表现：保持@page尺寸不变，仅调大SVG的width或height属性（比如将width设为1160px），生成的PDF就会变成一页。

原因分析 #

这是Chrome/Edge打印引擎的浮点精度计算问题，结合元素默认布局特性导致的：

1. 当SVG尺寸与@page尺寸完全相等（尤其是带小数的高度值），打印引擎的浮点运算误差会误判元素超出页面边界，触发分页逻辑。
2. SVG默认是inline-block元素，即使body设置了margin:0，仍可能隐含行间距或空白布局空间，导致整体高度略大于页面尺寸。

解决方案 #

以下几种方法均可解决该问题：

方法1：将SVG设为块级元素 #

消除SVG作为行内块元素带来的隐含布局空间：

<style>
  body { margin: 0; }
  svg { display: block; } /* 新增：强制SVG为块级元素 */
  @page {
    margin: 0;
    size: 1152px 1599.84px;
  }
</style>

方法2：给html/body添加溢出隐藏 #

强制隐藏页面外的内容，避免引擎误判分页：

<style>
  html, body { 
    margin: 0;
    overflow: hidden; /* 新增：隐藏溢出内容 */
  }
  @page {
    margin: 0;
    size: 1152px 1599.84px;
  }
</style>

方法3：让@page尺寸略大于SVG #

利用浏览器自动裁剪特性，将页面尺寸设置得比SVG大1px左右，规避精度误差：

@page {
  margin: 0;
  size: 1153px 1600.84px; /* 比SVG尺寸各大1px */
}

方法4：使用整数尺寸 #

如果业务允许，将SVG和@page的尺寸改为整数（比如把1599.84px改为1600px），彻底避免浮点运算带来的精度问题。

验证示例 #

修改后的单页PDF生成代码（以方法1为例）：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        svg {
            display: block;
        }
        @page {
            margin: 0px;
            size: 1152px 1599.84px;
        }
    </style>
</head>
<body>
<svg width='1152' height='1599.84' xmlns='http://www.w3.org/2000/svg'><text fill="green" stroke="None" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="none" stroke-dashoffset="0" stroke-miterlimit="4" transform="translate(876.02, 1207.8899999999999) scale(1, 1) skewX(0) skewY(0)" fill-rule="nonzero" paint-first="fill" font-size="60" font-weight="normal" font-family="Segoe UI Symbol" font-style="normal" line-height="1.16" text-align="left">✓</text></svg>
</body>
</html>

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