打印QR码坏分页CSS＆amp; Angular 2

Question

我在设计QR代码页生成器时遇到了问题。我必须在底部打印一些带有字母数字代码和相应QR码的票证，然后我编写代码将它们放入一个Flex容器中，使所有票据尽可能多地填充空间。我得到了这个结果，很好

正如您所看到的，我放了一个打印按钮，因为我需要打印所有的QR码，然后我用@media print设置所有CSS规则，只打印QR码而不用其余的。这是代码：

票-QR-codes.component.html

<div class="mb-2">
  <button class="btn btn-hero-success" (click)="printQRCodes()"><i class="fas fa-print"></i></button>
</div>
<div class="print">
  <page>
    <ng-container>
      <div class="qr-container m-4 no-divide" *ngFor="let biglietto of biglietti">
        <p>{{ biglietto.codice }}</p>
        <qr-code [size]="150" [value]="biglietto.codice"></qr-code>
      </div>
    </ng-container>
  </page>
</div>

票-QR-codes.component.scss

.qr-container {
  text-align: center;
  font-size: 20pt;
}

page.component.html

<div class="page">
  <ng-content></ng-content>
</div>

page.component.scss

body {
  background: rgb(204, 204, 204);
}

.page {
  background: white;
  color: black;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  display: flex;
  flex-wrap: wrap;
}

@media print {

  .page {
    margin: 0;
    box-shadow: 0;
  }

}

Global styles.scss

@media print {
  * {
    visibility: hidden;
  }

  .print, .print * {
    visibility: visible !important;
  }

  .print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.no-divide {
  page-break-inside: avoid;
}

似乎一切都正确，但是当我按下打印按钮时，QR码就会出现（第一页没问题）：

正如您所看到的，QR码无法正确显示，即使我设置CSS规则以避免内部分页符，有时它们也会被分页符切断。 我不是很擅长CSS，所以我可能会遗漏一些东西。如果有人可以帮助我，我会很高兴。