javascript - 打印页面时分页符、边框等 CSS 不起作用(Angular 5)

Question

我已尝试一切方法使其正常工作，但在尝试打印部分页面时，分页符和表格边框未正确显示。当显示打印预览时，所有内容都像纯文本一样显示，没有边框或分页符..

这里是 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;
  } */
}

我尝试在父元素上不 float 、分页前、溢出初始等。但没有效果。

Answer 1

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