页面打印时未应用CSS样式，求精准打印解决方案

问题描述 #

我在打印页面时，CSS样式未被应用。按下Ctrl+P本应打印出与浏览器中完全一致的页面，但实际未加载CSS，希望实现精准打印。

浏览器显示与打印预览存在明显样式差异。

相关代码 #

HTML代码 #

<div>
  <div class="dark-pale no-print text-center">
      <h2>To preview and print, press Alt + F + V.</h2>
      Make sure to review all the pages and adjust the page borders.
  </div>
  <div class="container report">
    <h5 class="title text-center">{{mudCheckWorksheet.title}}</h5>
    <app-mud-check-header [report] ="mudCheckWorksheet"></app-mud-check-header>
  <!-- Rheology & Pyc -->
 <div class="row new-section">
    <div class="cell caption-bold col-md-3">Properties</div>
  </div>
  <div class="row">
    <div class="cell col-md-3">Density, g/ml</div>
    <div class="cell value col-md-1">&nbsp;</div>
  </div>
  <div class="row">
    <div class="cell col-md-3">Density, lb/gal</div>
    <div class="cell value col-md-1">&nbsp;</div>
    <div *ngIf ="mudCheckWorksheet.isWbm" class="col-md-3 col-md-offset-5 text-center">
        Re-Checks
    </div>
  </div>
</div>

CSS代码 #

.row{
   font-size: 9pt;
}

.container.report {
  max-width: 800px;
  margin-bottom: 30px;
}

.container.album {
  max-width: 1130px;
  margin-bottom: 30px;
  width: 100%;
}

.title {
  font-weight: bold;
  text-decoration: underline;
}

.caption-bold {
  font-weight: bold;
}

.cell {
  height: 1.5em;
  overflow: hidden;
}

  .cell.value, .cell .value {
      text-align: center;
      border-bottom: 1px solid black;
  }

.new-section {
  margin-top: 10px;
}

.highlight {
  color: red;
}

.no-padding {
  padding: 0;
}

.sub-caption {
  padding-left: 22px;
}

.text-underlined {
  text-decoration: underline;
}

.sub-table {
  position: relative;
}

  .sub-table > div {
      left: 0;
      right: 0;
      position: absolute;
      border: 1px solid black;
  }

      .sub-table > div .row {
          margin: 0;
      }

.right-border {
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: black;
}

img.logo {
  margin: 10px 10px 10px 0;
}

.table-header {
  font-weight: bold;
  background-color: rgb(238, 238, 82);
  border-bottom: 1px solid black;
}

@media print {
  body {
    -webkit-print-color-adjust:exact !important;
  -print-color-adjust:exact ;
    background: white;
}

  .table-header {
      background-color: rgb(238, 238, 82) !important;

  }

  .highlight {
      color: red !important;
  }

  .no-print {
      display: none;
  }

  * {
      font-size: 7pt;
  }
}

table.printable {
  border-width: 0px;
  border-spacing: 0px;
  border-style: solid;
  border-color: black;
  border-collapse: collapse;
  margin: 3px 0;
  page-break-inside: avoid;
}

table.printable th {
  border-width: 1px;
  padding: 0 1px;
  border-style: solid;
  border-color: black;
  page-break-inside: avoid;
}

table.printable td {
  border-width: 1px;
  padding: 0 3px;
  border-style: solid;
  border-color: black;
  page-break-inside: avoid;
}

table.printable td .wide {
  max-width: 100%;
}
table.content-top td {
  vertical-align: top;
}

.pale {
  background-color: #FFFFDD !important;
}

.dark-pale {
  background-color: #feffa4 !important;
}

.for-reference {
  background-color: #FAF0E6 !important;
}

.group {
  background-color: #9AC361 !important;
}

.notes {
  background-color: #FAF0E6 !important;
}

.divider {
  background-color: #cccccc !important;
}

.vertical-iteration-header {
  background-color: #EAEAEA !important;
  word-wrap: break-word;
}

.nobr   { white-space:nowrap; }

table.printable td.no-border {
  border-width: 0px;
  border-style:none;
  border-color: white;
}

table.printable td.border-bottom {
  border-bottom-width: 1px;
  border-style:solid;
  border-color: black;
}

table.printable td.border-top {
  border-top-width: 1px;
  border-style:solid;
  border-color: black;
}

table.printable tr.no-border td {
  border:none;
}

div.pagebreak {
 page-break-after: always;
 page-break-inside: avoid;
}

div.nopagebreak {
 page-break-inside: avoid;
}

table.fixed {
  width:100%;
  table-layout: fixed;
}

table.fixed td.last {
  width: 1px;
  white-space: nowrap;
}

/*psd chart*/

.bar {
  _fill: #1f77b4;
  fill: #9AC361;
  stroke: #333;
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  _font-family: Arial, Helvetica, sans-serif;
  _font-size: 9pt;
}

.x.axis text {
  font-size: 8pt;
}

path.line {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

.dot {
  stroke: black;
}

.width10 {
width:10%
}

.width170 {
  width :170px
}
.width155 {
  width: 155px
}

.width50 {
  width: 50px
}

.width40 {
  width: 40px
}
.width60 {
  width: 60px
}
.width80 {
  width: 80px
}
.width75 {
  width: 75px
}
.width110 {
  width: 110px
}
.width15 {
  width: 15px
}
.width20 {
  width: 20px
}
.width100 {
  width: 100%
}

.width100px {
  width : 100px
}
.width200px {
  width: 200px
}

.width160px {
  width: 160px
}

.width730px {
  width: 730px
}

.width25 {
  width: 25%
}
.width26 {
  width: 26%
}
.width1 {
  width: 1%
}

table.printable th.no-border {
  border-width: 0px;
  border-style: none;
  border-color: white;
}

table.printable th.text-center {
text-align:center
}

table.printable th.normalFont {
  font-weight: normal;
}

table caption {
  padding: 0px;
}

解决方案 #

1. 优化打印媒体查询的样式优先级 #

现有打印样式中全局设置* {font-size:7pt}会强制覆盖所有元素字体，建议针对性调整样式，避免全局强制：

@media print {
  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact;
    background: white;
  }
  .table-header {
    background-color: rgb(238, 238, 82) !important;
  }
  .highlight {
    color: red !important;
  }
  .no-print {
    display: none;
  }
  /* 仅给需要调整的元素设置打印字体 */
  .row {
    font-size: 7pt;
  }
}

2. 修复响应式网格在打印中的失效问题 #

页面使用的col-md-*类属于响应式样式，打印时可能因视图尺寸变化失效，可在打印媒体查询中强制网格布局：

@media print {
  .container.report {
    width: 100%;
    max-width: none;
  }
  .col-md-1, .col-md-3, .col-md-offset-5 {
    float: left;
    position: relative;
    /* 根据打印需求自定义宽度 */
    width: auto;
  }
}

3. 检查浏览器打印核心设置 #

• 打开打印预览后，找到并勾选**"背景图形"**选项（通常在"更多设置"面板中），否则背景色、边框等样式不会显示。
• 关闭"节省墨水"或"简化页面"类选项，这类功能会自动屏蔽非必要CSS样式。

4. 用开发者工具调试打印样式 #

使用浏览器内置的打印模拟功能直接调试：

• Chrome/Firefox：按F12打开开发者工具，再按Ctrl+Shift+P，输入"Show print media simulation"开启打印预览模式，直接在浏览器中调整样式并实时查看效果。

5. 内联核心打印样式 #

如果外部CSS加载存在问题，可将核心打印样式内联到HTML的<style>标签中，确保打印时能直接读取：

<style>
@media print {
  /* 核心打印样式代码 */
}
</style>

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