Я работал на POS-сайте, когда я печатаю квитанцию о продаже, я хочу остановить принтер в конце div с идентификатором, но этого не происходит, и принтер продолжает.Я использовал свойство css «page-break-after: всегда», но оно не работает.Мой класс CSS выглядит как
@media print {
.paper-size {
float: none !important;
display: block !important;
width: 76mm !important;
page-break-after: always !important;
}}
, и это моя HTML-часть
<div id="print-div">
<div class="paper-size">
<div class="d-none d-print-block">
<div class="row justify-content-center ">
<div class="col-xs-10" style=" height: 25px;vertical-align: top;">
<h3>Hamed Medicose & Cosmetics</h3>
</div>
</div>
<div class="row" style=" height: 50px;vertical-align: top;">
<div class="col-md-12 text-center">
<p>Address</p>
</div>
</div>
<div class="row justify-content-center" style=" height: 20px;vertical-align: top;">
<div class="col-xs-6">
<p>Mobile : </p>
</div>
</div>
<div class="row justify-content-center" style=" height: 15px;vertical-align: top;">
<div class="col-xs-4">
<h5>Drug Lic # : </h5>
</div>
<div class="col-xs-4 pl-20">
<h5>User : {{userName}} </h5>
</div>
</div>
<div class="row justify-content-center pt-20">
<div class="col-xs-4">
<p>date</p>
</div>
</div>
<div class="row pl-20">
<div class="col-xs-4">
<p>Invoice No : {{invoiceNo}}</p>
</div>
<div class="col-xs-4 pl-20">
<p>Mr/Ms : {{patient}}</p>
</div>
</div>
</div>
<div class="paper-size ">
<div class="row d-print-none">
<div class="col-md-12">
<mat-table #table [dataSource]="myDataSource" *ngIf="saleItemList.length != 0">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef style="width : 2%" class="d-print-none">#</mat-header-cell>
<mat-cell *matCellDef="let element; let i=index" style="width : 2%" class="d-print-none"> {{i+1}}</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>
<h4>Item Name</h4>
</mat-header-cell>
<mat-cell *matCellDef="let element">
<p>{{element.name + ' ' + element.strength }}</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="pack">
<mat-header-cell *matHeaderCellDef>
<h4>Pack</h4>
</mat-header-cell>
<mat-cell *matCellDef="let element">
<p>{{element.pack}}</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="qty">
<mat-header-cell *matHeaderCellDef>
<h4>Qty</h4>
</mat-header-cell>
<mat-cell *matCellDef="let element">
<p>{{element.total_qty}}</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="price">
<mat-header-cell *matHeaderCellDef>
<h4>Price</h4>
</mat-header-cell>
<mat-cell *matCellDef="let element">
<p>{{element.sale_price}}</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="total">
<mat-header-cell *matHeaderCellDef>
<h4>Total</h4>
</mat-header-cell>
<mat-cell *matCellDef="let element">
<p>{{element.total}}</p>
</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef class="d-print-none">Action</mat-header-cell>
<mat-cell *matCellDef="let element;let i=index" class="d-print-none">
<button mat-icon-button (click)="removeFromList(i, element.total)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</div>
<table class="table d-print-table d-none d-print-block table-border full-width">
<tr>
<td>Item Name</td>
<td>Pack</td>
<td>Qty</td>
<td>Price</td>
<td>Total</td>
</tr>
<tr *ngFor="let o of saleItemList">
<td>{{o.name + ' ' + o.strength}}</td>
<td>{{o.pack}}</td>
<td>{{o.total_qty}}</td>
<td>{{o.sale_price}}</td>
<td>{{o.total}}</td>
</tr>
</table>
</div>
<div class="d-none d-print-block">
<div class="row justify-content-end ver-space">
<div class="col-5">
<p>Total : {{saleTotal}}</p>
</div>
</div>
<div class="row justify-content-end ver-space">
<div class="col-5">
<p>Discount : {{discount}}</p>
</div>
</div>
<div class="row justify-content-end ver-space ">
<div class="col-5">
<p>Pay : {{grandTotal}}</p>
</div>
</div>
</div>
</div>
</div>
, поэтому я хочу, чтобы принтер печатал последний div с "invoice no" и "имя пациента""принтер должен остановиться в этот момент, но этого не происходит.После печати полезных данных принтер распечатывает пустые страницы, поэтому я прекращаю его, выключая.
и часть javascript
static print(content:any) {
let head:any = document.getElementsByTagName('head')[0];
let htmlContent = '<html><head>'+head.innerHTML+'</head><body onload="window.print();window.close()">'+content.innerHTML+'</body></html>';
let popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(htmlContent);
popupWin.document.close();
}