如何设置HTML页面使其完美适配A4规格PDF导出？

问题根因 #

• 固定像素尺寸适配问题：你假设的150PPI对应1240px宽度和Chrome打印PDF的默认渲染DPI不匹配，且你没有考虑Chrome打印设置里的默认边距，会额外挤压内容空间
• 盒模型计算错误：默认box-sizing是content-box，你给.page设置的1240px宽度是内容宽度，叠加子元素的左右margin、grid的grid-gap后，总宽度超过了A4实际可容纳的内容宽度
• Grid布局打印适配缺失：没有针对打印媒体单独设置适配规则，默认采用屏幕端的布局参数

修复步骤 #

1. 全局重置盒模型 #

首先在CSS最顶部加入全局规则，统一盒模型计算方式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这样元素的宽高设置会包含内边距和边框，避免额外撑大容器。

2. 替换固定像素尺寸为打印专用单位 #

不要用屏幕端的px设置打印尺寸，改用打印专用的物理单位mm或者cm，A4标准尺寸为210mm × 297mm，同时移除你手动模拟的1英寸边距，改为在.page上用padding统一设置：

.page {
    display: grid;
    /* 用物理单位设置A4尺寸 */
    width: 210mm;
    height: 297mm;
    /* 边距直接用padding设置，不要用子元素的margin模拟 */
    padding: 25.4mm; /* 1英寸等于25.4mm */
    grid-template-rows: 20% 1% 79%;
    grid-template-columns: 35% 65%;
    grid-gap: 25px;
    font-family: Rubik;
    font-weight: 400;
    background-color: lightgray;
    font-size: 18px;
}

3. 移除子元素重复的边距设置 #

你已经在.page上设置了全局padding模拟1英寸边距，不需要再给子元素加重复的margin，避免二次挤压空间：

.page-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 0;
}

.line {
    grid-column: span 2;
    margin: 0;
}

.page-left-col {
    margin: 0;
}

.page-right-col {
    margin: 0;
}

4. 添加打印媒体专属规则 #

新增打印媒体查询，强制设置打印尺寸、边距，避免Chrome默认打印设置干扰：

@media print {
  @page {
    size: A4;
    /* 关掉浏览器默认边距，用我们自己在.page里设置的padding */
    margin: 0;
  }
  body, .page {
    width: 210mm;
    height: 297mm;
    /* 避免打印时出现不必要的背景裁切、滚动条 */
    overflow: hidden;
  }
}

5. 导出PDF时的设置校验 #

Chrome导出PDF时，在打印预览界面的「更多设置」里确认：

• 纸张尺寸选择A4
• 边距选择「无」
• 缩放选择「100%」，不要用默认的「适应可打印区域」

如果子Grid布局仍有溢出，可将需要自适应的子grid列单位替换为fr，避免设置固定宽度即可。

内容的提问来源于stack exchange，提问作者Ethan Partridge