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

【问题标题】：How can I implement a print functionality in Angular?如何在 Angular 中实现打印功能？
【发布时间】：2019-11-15 08:34:37
【问题描述】：

我正在尝试在我的发票应用程序中实现打印功能，但是，我的打印功能只对我有用一次 - 即仅在第一次点击时。当我尝试再次单击时，不会触发单击功能。当我检查我的 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>

【问题讨论】：

标签： javascript html angular printing

【解决方案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();'>

【讨论】：

【解决方案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();
            }

【讨论】：

这是有效的，但整个打印文档预览的 css 布局丢失。已尝试在组件标签中添加样式，但仍然无法正常工作。如何在其中添加样式？
在你的 CSS 中 - @media print { 在此处添加你的风格 }

【解决方案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}
    ]

【讨论】：