Angular项目Firefox打印多页PDF右侧边距异常跨浏览器兼容问题求解

根因说明 #

Firefox对旧版page-break-*分页属性的盒模型计算逻辑与Chrome/Edge等Webkit内核浏览器存在差异，当分页属性直接作用在带margin/padding的Bootstrap .row元素上时，会错误计算元素宽度导致内容溢出，出现右侧边距异常。

调整步骤 #

1. 新增全局打印样式 #

在项目的全局样式文件中加入以下打印专用样式，统一多浏览器的打印规则：

@media print {
  /* 统一盒模型计算规则 */
  * {
    box-sizing: border-box !important;
  }
  /* 固定打印页面尺寸和边距，可根据实际需求调整数值 */
  @page {
    size: A4;
    margin: 10mm 15mm 10mm 15mm;
  }
  /* 清除Bootstrap栅格浮动影响 */
  .row {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* 专用分页元素，避免分页属性直接作用于业务元素 */
  .print-page-break {
    break-before: page !important;
    page-break-before: always !important; /* 兼容旧版浏览器 */
    clear: both !important;
    height: 0;
    border: none;
    margin: 0;
    padding: 0;
  }
  /* 打印容器禁止横向溢出 */
  .print-container {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  /* Firefox 专属适配 */
  @-moz-document url-prefix() {
    .row .col-sm-1, .row .col-sm-2, .row .col-sm-5, .row .col-sm-6, .row .col-sm-7, .row .col-sm-11, .row .col-sm-12 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

2. 修改业务HTML代码 #

• 移除原开头.row元素上的style="page-break-before: always;"属性
• 在该.row元素前新增专用分页元素
• 所有打印内容外层包裹.print-container容器
  修改后的代码片段如下：

<!-- 所有打印内容外层包裹容器 -->
<div class="print-container">
  <!-- 新增专用分页元素 -->
  <div class="print-page-break"></div>
  <!-- 原有业务元素，移除内联分页样式 -->
  <div class="row px-2 margin-4 text-center">
    <div class="col-sm-12">
      <h5 class="mr-170 font-weight-bolder">PART III</h5>
      <h5 class="mr-22">Dummy</h5>
      dummy: &nbsp;
      <input *ngFor="let x of storeSplittedTin" class="assessment-input-box-len text-center ml-1" type="text" value="{{x}}" disabled>
    </div>
  </div>

  <!-- 后续原有业务代码保持不变 -->
  <div class="row border-top mt-4">
    <!-- 原有内容省略 -->
  </div>
</div>

3. 可选适配调整 #

如果仍存在细微边距差异，可调整@page的边距数值，或移除业务元素上的px-2、mr-170等会改变横向宽度的类，统一通过打印样式控制间距。

内容的提问来源于stack exchange，提问作者Md.Habibur Rahman