这是我的html:
<div class="rack-label" *ngFor="let product of productsToPrint;let indexOfElement=index;let l=count; " >
// Showing barcodes here
<div *ngIf="(indexOfElement+1)%12==0" class="row-footer">
// And i want to page-break-after works here
// cuz i am showing barcodes
</div>
</div>
`
这是我的css打印页面：
@media print {
@page{
margin:3mm 0mm 2mm 3mm;
border: 1px solid red;
/* height: 210mm;
width: 148.5mm; */
size:A4;
margin: 0;
}
html{
border: 1px solid yellow;
}
body
{
width: 210mm;
height: 297mm;
display: grid;
grid-template-columns: 9cm 9cm 9cm;
grid-template-rows:auto auto auto;
}
.row-footer{
clear: both; page-break-before: always;
page-break-inside: avoid;
}
}
还是有办法解决这个问题？事实上，我所想做的就是将3列4行的条形码打印到A5页面上。但它在ngprint上不起作用。所以我想做的是设置为A4，并让空间到页面的一半。
问题似乎是absolute定位的元素不占用任何空间。Chromium似乎认为页面基本上是空白的，因此不需要新页面。
我通过给包含绝对定位元素的relative定位元素一个最小大小来解决这个问题。
我无法复制您的示例，因为我不知道您为条形码插入了什么，您的非打印样式也可能会影响它，但这里有一个产生问题的示例和解决方案。
问题是，下面的HTML将全部打印在同一页上(有时，它会在第一页后中断(：
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>
相对定位的div都是零大小，其中绝对定位的元素不会影响大小。增加1毫米的宽度和高度，提供适当的分页符
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>