如何通过Chrome打印极细线条（如1/300 dpi）到PDF并避免CSS像素取整？

阿华AIGC实验室

2026-4-2

我之前也碰到过Chrome打印极细线条被强制取整的头疼问题，尤其是要精确到1/300英寸这种级别——毕竟Chrome的打印渲染引擎对极小的CSS元素有自动“凑整”的优化，目的是避免模糊，但反而卡了我们这种需要精确尺寸的场景。结合我踩过的坑，给你几个亲测有效的方案，完全不用换Prince XML：

用SVG绘制精确线条（最稳定的方案）
SVG是矢量图形，Chrome打印时会直接按物理尺寸渲染，不会被CSS像素取整。你可以直接插入inline SVG来定义1/300英寸宽的线条：
```

<svg width="100%" height="0.5in" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
  <line 
    x1="0" y1="75" 
    x2="300" y2="75" 
    stroke="#000" 
    stroke-width="1" 
  />
</svg>
```
原理很简单：viewBox的300宽度对应300dpi下的1英寸，所以stroke-width="1"正好是你要的1/300英寸。打印时Chrome会完美保留这个矢量细节，不会做任何取整操作。
纯CSS方案：物理单位+打印设置校准
直接用物理单位（英寸/毫米）定义线条，同时严格控制Chrome的打印缩放：
先写CSS：
```
@media print {
  .thin-line {
    width: 100%;
    height: 0.003333in; /* 精确等于1/300英寸 */
    background-color: #000;
    margin: 0;
    padding: 0;
  }
  /* 消除页面边距和缩放干扰 */
  @page {
    size: auto;
    margin: 0;
  }
  body {
    margin: 0;
  }
}
```
然后打印时必须做这几步：
1. 打开Chrome打印界面（Ctrl+P/Command+P）
2. 点击“更多设置”
3. 缩放选择**“实际大小”**（绝对不能选“适合”或自定义缩放）
4. 勾选**“背景图形”**（Chrome默认不打印背景，否则线条会消失）
  注意：这个方案偶尔会因为Chrome的打印优化被取整，所以如果SVG方案能用，优先选SVG。

CSS边框+transform缩放（备选方案）
如果一定要用CSS边框来实现，可以通过缩放来绕过像素取整：

@media print {
  .thin-line {
    width: 100%;
    border-bottom: 1px solid #000;
    /* 计算缩放比例：目标宽度(1/300in) ÷ 1CSS像素宽度(1/96in) = 0.32 */
    transform: scaleY(0.32);
    transform-origin: bottom left; /* 确保缩放从线条底部开始，位置不偏移 */
    margin: 0;
    padding: 0;
  }
}

这个方法利用transform的矢量缩放特性，把1px的边框缩到精确的1/300英寸宽，打印时Chrome会保留缩放后的精确尺寸。

最后给你几个小提醒：