Angular 14使用ngx-print打印时CSS未生效问题求助

我有一个表格，在Angular 14中使用ngx-print库打印时，CSS属性已在页面中正常显示，但打印预览里完全没效果。我已经开启了浏览器的背景图形选项，问题还是存在，请问可能的原因是什么？

HTML代码 #

<div class="container-fuild ml-3 mr-3">
    <mat-card>
      <mat-card-content *ngIf="reportingDataModel?.searchList.length>0 && reportingDataModel?.calculationList.length>0 ">
         <div class="row">
        <div class="col-md-12">
          <div class="table-responsive">
            <div class="tableFixHead">
              <div class="table text-center">
                <table class="table table-bordered border border-secondary" id="save-stage48">
                  <thead id="tableHeadRow" role="row"> 
                    <tr>
                      <th>#</th>
                      <th>{{ 'MeasurementPoints' | translate }}</th>
                        <th   *ngFor="let searchList of reportingDataModel?.searchList; let i = index">
                          <div>{{ searchList.worOrderName }}</div>
                          <div>{{ searchList.measurementTypeName }}</div>
                          <div>{{ searchList.widthAndShrink }}</div>
                          <div *ngIf="searchList.reportType === 1">{{ searchList.sizeId }} {{ "Size" | translate }}</div>
                        </th>
                      <th>{{ 'averagetolerance' | translate }}</th>
                      <th   >
                        {{averageWidth}}
                        <br>
                        {{'decidetolerance' | translate}}
                      </th>
                      <th>{{ 'Description' | translate }}</th>
                    </tr>
                  </thead>
                  <tbody >
                    <ng-container *ngFor="let calculation of reportingDataModel?.calculationList[0]; let i = index">
                      <tr >
                        <td style=""> {{i+1}} {{incomingName}} </td>
                        <td style="" [id]="calculation?.id">{{calculation?.measurementPointName}}</td>
                        <ng-container *ngFor="let calculations of reportingDataModel?.calculationList; let j = index">
                          <td>{{reportingDataModel?.calculationList[j][i].appliedPullTolerance}}</td>
                        </ng-container>
                        <td >{{calculaterAverageTolerance(i)}}</td>
                        <td></td>
                        <td rowspan="3"> <textarea name="" id="" cols="15" rows="3"></textarea></td>
                      </tr>
  
                      <ng-container *ngIf="i <= reportingDataModel?.calculationList[0].length">
                          <tr >
                            <td style="white-space:nowrap">{{i+1}} {{incomingNameTwo}}</td>
                            <td style="text-align:start">{{calculation?.measurementPointName}}</td>
                            <ng-container *ngFor="let calculations of reportingDataModel?.calculationList; let j = index">
                              <td>{{reportingDataModel?.calculationList[j][i].actualPullTolerance}}</td>
                            </ng-container>
                            <td>{{calculaterActualPullTolerance(i)}}</td>
                            <td><input type='number' style="width:50%"  step="0.1" [value]="total"/></td>
                          </tr>
  
                          <tr>
                            <td style="white-space:nowrap">{{i+1}} {{Avg.}}</td>
                            <td style="text-align:start">{{calculation?.measurementPointName}}</td>
                            <ng-container *ngFor="let calculations of reportingDataModel?.calculationList; let j = index">
                              <td>{{reportingDataModel?.calculationList[j][i].averageValue}}</td>
                            </ng-container>
                            <td >{{calculaterAverageValue(i)}}</td>
                            <td></td>
                          </tr>
                      </ng-container>
                    </ng-container>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </mat-card-content>
    </mat-card>
  </div>

CSS代码 #

.table.text-center th,
.table.text-center td {
text-align: center;
}

#save-stage48 tbody tr td {
padding: 0 0.313rem;
height: 1.563rem;
vertical-align: middle;
text-align: center;
}

#save-stage48, #save-stage48 td, #save-stage48 tr {
border: 0.031rem solid black;
}

#save-stage48 th {
border: 0.063rem dashed black;
}

#save-stage48 th {
white-space: nowrap;
text-align: center;
}

#save-stage48 td {
padding: 0.5rem 0;
}

#save-stage48 {
border-collapse: collapse;
}

.tableFixHead {
overflow-y: auto;
overflow-x: auto;
height: 80%;
width: 100%;
}

.tableFixHead th {
background-color: rgba(245, 245, 245, 1) !important;
color: #666 !important;
}

.tableFixHead thead tr th {
position: sticky;
top: 0;
}

#save-stage48 tbody tr:nth-child(3n+1) {
background-color: rgba(112, 128, 144, 1) !important;
color: white !important;
}

#save-stage48 tbody tr:nth-child(3n+2) {
background-color: rgba(148, 164, 179, 1) !important;
color: white !important;
}

#save-stage48 tbody tr:nth-child(3n+3) {
background-color: rgba(171, 186, 199, 1) !important;
color: white !important;
}

.dataTables_wrapper {
padding: 0 !important;
font-size: 0.688rem !important;
font-weight: bold;
}

#save-stage48 tbody tr:nth-of-type(3n) td {
border-bottom: 0.375rem solid white;
}

#save-stage48 tbody tr td:first-child {
border-left: 0.375rem solid white;
}

#save-stage48 tbody tr:nth-of-type(3n+1) td:last-child, tr:first-child td:last-child {
border-right: 0.375rem solid white;
border-bottom: 0.375rem solid white;
}

可能的原因及解决方法 #

1. 未针对打印场景编写媒体查询样式 #

浏览器打印时会加载独立的打印样式，普通页面样式可能被忽略，而且position: sticky、overflow这类适配屏幕滚动的属性在打印模式下完全不生效。

解决办法：
添加@media print媒体查询，把需要在打印中生效的样式单独声明，同时重置打印相关的默认行为：

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  /* 移除滚动容器，打印不需要滚动效果 */
  .tableFixHead {
    overflow: visible !important;
    height: auto !important;
  }

  /* 强制保留背景色和边框 */
  #save-stage48, #save-stage48 td, #save-stage48 tr {
    border: 0.031rem solid black !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #save-stage48 th {
    border: 0.063rem dashed black !important;
    background-color: rgba(245, 245, 245, 1) !important;
    color: #666 !important;
    position: relative !important; /* 替换sticky，打印不支持该属性 */
  }

  /* 确保行背景色生效 */
  #save-stage48 tbody tr:nth-child(3n+1) {
    background-color: rgba(112, 128, 144, 1) !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #save-stage48 tbody tr:nth-child(3n+2) {
    background-color: rgba(148, 164, 179, 1) !important;
  }

  #save-stage48 tbody tr:nth-child(3n+3) {
    background-color: rgba(171, 186, 199, 1) !important;
  }

  /* 移除卡片阴影等不影响打印的样式 */
  mat-card {
    box-shadow: none !important;
    border: none !important;
  }
}

2. ngx-print打印区域指定错误 #

如果没有明确指定打印区域，ngx-print可能只捕获部分元素，导致样式丢失。

解决办法：
在打印按钮上指定打印区域的容器ID，同时给外层容器添加对应ID：

<button ngx-print printSectionId="print-container">打印</button>

<!-- 给外层容器加ID -->
<div id="print-container" class="container-fuild ml-3 mr-3">
  <!-- 你的表格代码 -->
</div>

3. 浏览器默认打印样式重置 #

即使开启了背景图形，部分浏览器仍会默认禁用背景色，需要强制开启颜色调整。

解决办法：
在打印样式中添加-webkit-print-color-adjust: exact和print-color-adjust: exact，这两个属性可以强制浏览器保留元素的背景色和文字颜色。

4. CSS优先级不足 #

页面样式可能被ngx-print注入的默认打印样式或浏览器默认样式覆盖，需要提升关键样式的优先级。

解决办法：
对打印时必须生效的样式添加!important（合理使用，避免滥用），或者使用更具体的选择器（比如加上父容器ID）来提升优先级。

内容的提问来源于stack exchange，提问作者Eren Akgöz