如何在 Angular 中实现打印功能？

Question

我正在尝试在我的发票应用程序中实现打印功能，但是，我只有一次打印 function 对我有用 - 也就是说，仅在第一次点击时。 当我尝试再次单击时，不会触发单击 function。 当我检查我的console.log时，抛出以下错误： ERROR TypeError: Cannot read property 'postMessage' of null

这是我尝试过的：

 printInvoice() { const printContents = document.getElementById('print-index-invoice').innerHTML; const originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; }

 <div class="modal fade" id="modalIndexInvoicePreview" tabindex="-1" role="dialog"> <button type="submit" class="btn btn-info btn-lg mt-2 position-absolute" (click)="printInvoice()"> <i class="fa fa-print icon-print"></i>Print</button> <div class="modal-dialog modalContent"> <div class="modal-content modalIndexInvoicePreview" id="print-index-invoice"> <div class="modal-header div-logo"> <img class="logo-invoice" [src]="logoUrl"> <div> <b>Invoice|Receipt|Attachment</b> </div> </div> </div> </div> </div>

Answer 1

有两种方法可以实现打印功能。 首先是您可以使用 CSS 媒体，这将允许您将媒体用作“打印”。

第二个选项是将 CSS 附加到您的打印部分。 您可以轻松地启用媒体“打印”，同时将外部样式表附加到您的打印模块。 现在，我已经在打印模块中启用了引导程序。 您可以使用自己的样式表代替引导程序。

访问jsfiddle.net/rdtzvf2c/1/

正如您在结果中看到的，顶部的文本和图像被拉到中心，这是通过在打印 div 时动态应用的引导程序 CSS 发生的。

如果有任何其他帮助，请告诉我。

 function printDiv() { var divToPrint = document.getElementById('print-index-invoice'); var newWin = window.open('', 'Print-Window'); newWin.document.open(); newWin.document.write('<html><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" media="print"/><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>'); newWin.document.close(); setTimeout(function() { newWin.close(); }, 10); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal-content modalIndexInvoicePreview" id="print-index-invoice"> <div class="container col-md-12"> <div class="text-center"> This is right aligned: <img src="https.//www.gstatic.com/webp/gallery3/1.png" class=" rounded mx-auto d-block" alt="..;"> </div> </div> <div class="modal-header div-logo"> <div> <b>Invoice|Receipt|Attachment</b> </div> </div> </div> <input type='button' id='btn' value='Print' onclick='printDiv();'>

Answer 2

尝试这个

printInvoice() {
            var divToPrint = document.getElementById('print-index-invoice');
            var newWin = window.open('', 'Print-Window', 'width=1200,height=700');
            newWin.document.open();
            newWin.document.write('<html><head><link href="app/assets/css/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><link href="app/assets/css/print.css" rel="stylesheet" type="text/css"/><style></style> </head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
            newWin.document.title = 'Your PDF Title';
            newWin.document.close();
            }

Answer 3

以干净的方式进行操作，可以将 CSS 和数据添加到打印页面

     //inside component where print button event triggered
        PrintTransformerResult(): void {
            // const transformerPanels = this.transformer;
            this.printService.printDocument('T146', this.transformer);
          }

        //inside service
        printDocument(documentName: string, documentData: any): void {
            this.router.navigate(['/', { outlets: { print: ['print', {queryParams: JSON.stringify(documentData)}]}}]);
          }


        //inside print layout component.ts
        export class PrintLayoutComponent implements OnInit {

          invoiceIds: any;
         data: any;
          constructor(route: ActivatedRoute,
                      private router: Router,
                      private printService: PrintService) {
            this.invoiceIds = route.snapshot.paramMap;
          }

        ngOnInit(): void {
            console.log('xsssdsd' + JSON.stringify(this.invoiceIds));
            this.data= JSON.parse(this.invoiceIds.params.queryParams);
            setTimeout(() => {
              window.print();
              this.router.navigate([{ outlets: { print: null }}]);
            }, 2000);
          }

        }

        //inside print layout component.html
        <div class="color-black font-18 ml-auto mb-10 text-center">
          <span class="font-w9">{{data?.customer_name}}</span>
          <span class="opacity-4 font-14 pl-4"><b>{{data?.object_id}}</b></span>
        </div>


        <div>
           <span class="color-black2 font-16 width-full font-w9">T146 Input P146-1 : </span> <span class="ml-15">{{data?.modified_on}}</span>
          <div class="mt-10">
              Identification: {{data?.name}}
          </div>
        </div>

           <-- custome tag, passing data -->
          <div class="height-full" style="height: 100%;">
            <app-t146-panel1-view [data]="data">
            </app-t146-panel1-view>
          </div>


    // inside app component html
    <router-outlet></router-outlet>
    <router-outlet name="print"></router-outlet>

    //inside routing module.ts
    const appRoutes: Routes = [
        { path: '', redirectTo: '/home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },

        { path: 'print', outlet: 'print', component: PrintLayoutComponent}
    ]

如何在 Angular 中实现打印功能？

问题描述

3 个解决方案

解决方案1
1 已采纳 2019-11-15 09:27:46

解决方案2
0 2019-11-15 08:43:24

解决方案3
0 2019-11-15 09:49:17

如何在 Angular 中实现打印功能？

问题描述

3 个解决方案

解决方案1 1 已采纳 2019-11-15 09:27:46

解决方案2 0 2019-11-15 08:43:24

解决方案3 0 2019-11-15 09:49:17

解决方案1
1 已采纳 2019-11-15 09:27:46

解决方案2
0 2019-11-15 08:43:24

解决方案3
0 2019-11-15 09:49:17