Chrome打印PDF边距实战：从@page规则到视口适配的完整解决方案-CSDN博客

1. 为什么你的网页一打印PDF就“面目全非”？

你有没有遇到过这种情况？精心设计的网页，在浏览器里看起来完美无缺，布局清晰，图片精美。但当你点击“打印”，选择“另存为PDF”后，打开生成的PDF文件一看，整个人都懵了：表格被拦腰截断，侧边栏跑到了内容下面，漂亮的背景色全都不见了，整个页面看起来就像被“压扁”了一样。这可能是前端开发者在处理打印需求时，最常遇到的“灵魂拷问”。

我自己就踩过不少这样的坑。记得有一次，客户需要一个数据报表的打印功能，我在Chrome里调试得漂漂亮亮，结果发给客户，客户用他自己的打印机设置一打，回来就问我：“为什么我的表格少了右边两列？” 当时真是百思不得其解，后来才发现，问题根源就在于对“打印”这个行为的理解太浅了。我们平时在浏览器里看到的网页，是运行在一个几乎无限宽的“画布”上的，而打印，尤其是输出到标准的A4纸上，是把内容塞进一个物理尺寸固定、分辨率（DPI）也固定的“框框”里。这两者之间的转换，如果不用CSS去主动干预和适配，结果必然是灾难性的。

简单来说，问题的核心有三个：纸张尺寸、DPI转换和页边距。Chrome在打印或保存为PDF时，默认的纸张是A4（210mm × 297mm）。这本身没什么，关键是浏览器和操作系统会用一个叫DPI（每英寸点数）的参数，把毫米（mm）转换成我们在CSS里熟悉的像素（px）。Windows系统下，网页打印的默认DPI通常是96。你算一下：1英寸等于25.4毫米，那么A4纸的宽度210mm，换算成像素就是大约794px（210 / 25.4 * 96 ≈ 794）。看到了吗？你那个为1200px宽屏设计的网页，一下子要被塞进一个只有794px宽的“通道”里，能不挤吗？

这还没完，打印不可能满纸都是内容，四周得有页边距。无论是用户手动选择“窄边距”（比如5mm），还是打印机驱动的“默认边距”（可能高达19mm），这都会进一步挤压内容的可用空间。假设是默认的19mm边距，那么内容区域的宽度可能就只剩下大约650px了。你的浮动布局在650px的宽度下肯定会错乱，超过650px宽的图片和表格，右边部分就直接被“切掉”了，这就是内容截断的根本原因。理解了这个底层逻辑，我们才能对症下药，而不是盲目地调整样式。

2. 掌控打印样式：从 `@media print` 开始

要解决打印问题，第一步就是告诉浏览器：“嘿，当用户要打印的时候，请用我专门准备的另一套衣服（样式）来展示内容。” 这个“另一套衣服”，就是打印媒体查询。在CSS里，我们通过 @media print { ... } 这个规则来定义只会在打印（或打印预览）时生效的样式。这是所有打印优化的基石。

我建议你在项目的全局样式文件里，或者关键页面的<style>标签中，专门开辟一个区域来写打印样式。这样管理起来清晰，也便于维护。一个最基本的打印样式，通常要做以下几件事：

隐藏不必要的元素：网页上那些导航栏、侧边栏、广告、视频播放器、巨大的页头页脚，在纸质版上毫无意义，反而浪费墨水、干扰阅读。我们可以用 display: none; 把它们统统隐藏掉。
```
@media print {
  .site-header,
  .main-nav,
  .sidebar-ad,
  .video-player,
  .comment-section,
  .no-print { /* 也可以给任何不想打印的元素加这个类 */
    display: none !important;
  }
}
```
注意这里用了 !important。因为在打印场景下，我们需要确保这些样式具有最高优先级，覆盖掉可能存在的其他显示规则。
调整文字和背景：为了提高打印件的可读性和节省墨水，通常我们会：
- 将文字颜色强制设为黑色（color: #000;），避免浅灰色在打印后看不清。
- 去掉所有背景色和背景图片（background: none !important;），除非是必须保留的logo水印等。
- 确保链接即使在黑白打印下也能被识别，可以尝试给链接加下划线，或者在链接后面用 content 属性附上URL（这个技巧需要谨慎使用，可能影响排版）。
优化盒模型和布局：打印时，我们通常希望内容以最简洁、线性的方式排列。
- 将容器元素的宽度设为 100% 或 auto，让它们顺应打印页面的内容宽度。
- 将使用了 float 或 position 进行复杂布局的元素，改为 display: block; 并清除浮动，让内容从上到下顺序排列。
- 确保图片有 max-width: 100%; 的设定，防止其溢出容器。

一个非常重要的实战技巧：不要只依赖浏览器的打印预览！Chrome的打印预览窗口和实际生成的PDF或纸质输出，有时会有细微差别。我的习惯是，每次调整完打印样式后，直接“另存为PDF”，然后用PDF阅读器打开检查。这样能发现一些预览里看不到的问题，比如分页符位置是否合适、页眉页脚是否意外出现等。