打印页面时分页符、边框等 CSS 不起作用（Angular 5）答案

【问题标题】：Page break, border etc CSS does not work when printing page (Angular 5)打印页面时分页符、边框等 CSS 不起作用（Angular 5）
【发布时间】：2017-11-16 09:22:11
【问题描述】：

我已尽一切努力让它工作，但尝试打印部分页面时分页符和表格边框无法正确显示。显示打印预览时，所有内容都像纯文本一样显示，没有边框或分页符..

Plunker 示例在这里：只需点击打印即可查看预览

https://plnkr.co/edit/xR9RXEzbfKX8Kc7RRP7V?p=preview

HTML：

<a class="btn btn-default" (click)="print()">print</a>

<div class="book" id="print">
  <div class="page break-after" *ngFor="let p of pages; let i = index">

    Side {{i + 1}}/100

    <div class="subpage">

      <table style="width:100%">
        <tr class="table-header">
          <th>Postnr</th>
          <th>NS-kode/Tekst</th>
          <th>Enhet</th>
          <th>Mengde</th>
          <th>Pris</th>
          <th>Sum</th>
        </tr>

        <!-- space -->
        <tr class="table-body">
          <td>&nbsp;</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr class="table-body">
          <td>07</td>
          <td class="chapter-title">Stålkonstruksjoner</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <!-- space -->
        <tr class="table-body">
          <td>&nbsp;</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr class="table-body">
          <td>07.26</td>
          <td class="chapter-title">Yttertak</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <!-- space -->
        <tr class="table-body">
          <td>&nbsp;</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr class="table-body">
          <td>07.23.1</td>
          <td>PB1.322A</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr class="table-body">
          <td></td>
          <td>FAGVERK MED SVEISTE FORBINDELSER</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

      </table>
    </div>
  </div>


  <div class="page break-before">
    <div class="subpage">Page 2/2</div>
  </div>
</div>

CSS：

.book {
  float: none;
}

.page {
  width: 210mm;
  min-height: 297mm;
  margin: 10mm auto;
}

.subpage {
  padding: 1cm;
  border: 1px black solid;
  box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3);
  height: 297mm;
  background: white;
}

td {
  padding-left: 2mm;
}

tr.table-header,
tr.table-header>th {
  border: 1px solid black;
  text-align: center;
}

tr.table-body,
tr.table-body>td {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

tr.table-body:last-child {
  border-bottom: 1px solid black;
}

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

.break-after {
  display: block;
  page-break-after: always;
  position: relative;
}

.break-before {
  display: block;
  page-break-before: always;
  position: relative;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
  div {
    overflow: initial !important;
    float: none !important;
  }
  .book {
    float: none !important;
  }
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
    page-break-inside: avoid;
    float: none !important;
  }
  /* table {
    float: none !important;
  }
  .page-break {
    page-break-inside: avoid;
    page-break-before: always;
  }
  .dont-print {
    display: none;
  } */
  /* .subpage {
    page-break-after: always;
  } */
}

我尝试过在父元素上浮动 none、page-break-before、溢出初始等。但没有效果。

【问题讨论】：

标签： javascript html css angular printing

【解决方案1】：

通过调用“print()”方法，您正在打开一个新窗口；因此，对于新窗口中包含的内容，需要在新窗口中加载内联样式或样式表。

【讨论】：

【解决方案2】：

Ctrl+P 是最好的解决方案。我之前也遇到过同样的问题。

【讨论】：