Bootstrap Flex不会在打印中显示所有svg

Question

我有这个带有角度动态呈现的svg的html代码

<div class="container">
    <div class="hdn">
        <h2>Barcode Generator</h2>
        <button (click)="createBarcode()">Load Barcode</button>
        <!-- <button (click)="onPrint()">Print</button> -->
    </div>
    <div id="toPrint" class="d-flex align-content-start flex-wrap">
        <div class="p-4 text-center" *ngFor="let t of Data">
            <svg [attr.id]="'b-'+t.barcode"></svg><br>
            <span>{{t.name}}</span>
        </div>
    </div>
</div>

这将使我在浏览器上获得此输出。

我的问题是：当我在浏览器中打印预览时，它只给我打印了10个条形码，但是却渲染了78个条形码

并尝试了较低的规模

我的代码可能出问题了

我在style.css中有此代码以供打印

@media print {
body * {
  visibility:hidden;
}
#toPrint * {
  visibility:visible;
}
#toPrint {
  position:absolute;
  left:0;
  top:0;
}

}

非常感谢您：）