Angular Material电子罚单页面打印异常：银行账号显示问题求助

我之前做类似政务类打印页面时也碰到过这种情况，浏览器渲染正常但打印就乱套，核心原因大多是HTML结构不规范或者打印引擎的解析规则差异。先帮你梳理下代码里的问题，再给你修正后的方案：

问题分析 #

1. HTML结构违规：你直接在<table>里嵌套了<div>，但HTML表格只能包含<thead>、<tbody>、<tr>、<td>这类专用元素。浏览器渲染时会容错，但打印引擎对不规范结构的容忍度极低，这是银行账号区域打印异常的主要诱因。
2. 列宽设置完全错误：每个银行账号的<td>都设了Width="50%"，16个td加起来宽度远超100%，浏览器里靠溢出隐藏勉强显示，打印时直接撑破布局或者挤压内容。
3. Overflow隐藏截断内容：你用overflow: hidden包裹内容，打印时这个属性很容易导致部分内容被截断，尤其是当内容超出容器边界时。

修正方案 #

1. 修复HTML结构 #

把所有内容放到表格的标准结构里，用<tbody>包裹行，将原本的div内容整合到td中：

<div class="billing-address" fxLayout="row" fxLayoutAlign="space-between">
  <!-- 保留你原有内容 -->
</div>
<div>
  <h4><strong>Banking Details:</strong></h4>
</div>
<div>
  <h5>Details for the RTGS/NEFT Transaction</h5>
</div>
<table style="width:100%; border-collapse: collapse;">
  <tbody>
    <!-- 银行账号行 -->
    <tr>
      <td style="padding: 8px; width: 30%;">
        <strong>Bank Account No:</strong>
      </td>
      <td style="padding: 8px; width: 70%; font-family: monospace;">
        AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA
      </td>
    </tr>
    <!-- 账户名称行 -->
    <tr>
      <td style="padding: 8px; width: 30%;">
        <strong>Account Name :</strong>
      </td>
      <td style="padding: 8px; width: 70%;">
        AMC ADVERTISEMENT RIGHT
      </td>
    </tr>
    <!-- IFSC Code行 -->
    <tr>
      <td style="padding: 8px; width: 30%;">
        <strong>IFSC Code :</strong>
      </td>
      <td style="padding: 8px; width: 70%;">
        ICIC0000106
      </td>
    </tr>
    <!-- 开户行行 -->
    <tr>
      <td style="padding: 8px; width: 30%;">
        <strong>Account Bank :</strong>
      </td>
      <td style="padding: 8px; width: 70%;">
        ICICI Bank
      </td>
    </tr>
  </tbody>
</table>

2. 添加打印专用CSS样式 #

在组件CSS或全局CSS里添加打印媒体查询，适配打印引擎的解析规则：

@media print {
  /* 强制Angular Material的flex布局在打印时生效 */
  .billing-address {
    display: flex !important;
    justify-content: space-between !important;
  }

  /* 移除可能截断内容的overflow属性 */
  * {
    overflow: visible !important;
  }

  /* 调整表格字体和宽度，适配打印纸张 */
  table {
    font-size: 12px;
    width: 100% !important;
  }

  /* 避免分页时截断表格行 */
  tr {
    page-break-inside: avoid;
  }
}

额外小技巧 #

• 银行账号用等宽字体（monospace）可以让每个字符宽度一致，打印时不会出现错位，看起来更规范。
• 测试时用浏览器的打印预览（Ctrl+P）实时调整边距和缩放比例，直到布局完全适配纸张。

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