在div末尾停止打印机

时间:2018-10-24 07:59:26

标签: javascript css printing media-queries

我在POS网站上工作,当我打印销售数据的收据时,我想在具有ID的div末尾停止打印机,但是这没有发生,并且打印机继续。我使用了css属性“ page-break-after:always”,但是它不起作用。我的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上打印时,打印机应该在此时停止,但不会发生。在打印有用的数据后,打印机会打印出空白页,因此我可以通过将其关闭来停止打印。

和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();
}

0 个答案:

没有答案