我正在使用@media print
样式压缩一个庞大的ion-input
页面,以将页面数量减少15个页面。
打印到pdf (打印预览和打开保存的pdf)在Firefox v63中看起来很好,
但在Chrome v70中,当我设置min-height
时,它会产生锯齿或整行缺失,而不管chrome页面边距是None还是Default。我还看到它删除了id、描述、子项名称或价格行,如果它们落在分页间隙中。
有没有办法防止Chrome在自动换页/换页时出现锯齿或掉线?
--
代码:
@media print {
ion-item, .item-inner, .input-wrapper, ion-input, input {
min-height: 23px !important; // causes line aliasing
height: 24px !important;
max-height: 25px !important;
line-height: 26px !important;
}
}
<ion-card *ngFor="let eachCard of myCards">
<ion-row>
<ion-col col-2>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.id"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-11>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.description1"></ion-input>
</ion-item>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.description2></ion-input>
</ion-item>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.description3"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<div *ngFor="let eachSubitem of eachCard.subitems">
<ion-row>
<ion-col col-1></ion-col>
<ion-col col-5>
<ion-item>
<ion-input type="text" [(ngModel)]="eachSubitem.name"></ion-input>
</ion-item>
</ion-col>
<ion-col col-5>
<ion-item>
<ion-input type="text" [(ngModel)]="eachSubitem.altName"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-1></ion-col>
<ion-col col-3>
<ion-item>
<ion-input type="number" [(ngModel)]="eachubitem.price"></ion-input>
</ion-item>
</ion-col>
<ion-col col-7>
<ion-item>
<ion-input type="text" [(ngModel)]="eachSubitem.unit"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</div>
</ion-card>
https://stackoverflow.com/questions/53659407
复制相似问题