Question

print(){ 
this.hideBoolean = true;
        let printContents, popupWin;
        printContents = document.getElementById('print-section').innerHTML;
        popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
        popupWin.document.open();
        popupWin.document.write(`
      <html>
        <head>
          <style>
          body{  width: 99%;}
            label { font-weight: 400;
                    font-size: 13px;
                    padding: 2px;
                    margin-bottom: 5px;
                  }
            table, td, th {
                   border: 1px solid silver;
                    }
                    table td {
                   font-size: 13px;
                    }

                     table th {
                   font-size: 13px;
                    }
              table {
                    border-collapse: collapse;
                    width: 98%;
                    }
                th {
                    height: 26px;
                    }
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
        );
        popupWin.document.close();

    }

-------------- HTML ------------

    <button type="button" (click)="print()"> Print</button> 

<div id="print-section" >
<div *ngIf="hideBoolean"> value .</div>

所以主要问题是单击按钮时。布尔无法正常工作，第一次单击后将无法正常工作。我没有得到适当的问题？有人帮我！谢谢

Answer 1

好的，发表评论后，我终于解决了问题。

您的html：

pdb

您的ts：

<span (click)="printSingle()" class="btn">Print single</span>
<span (click)="printDouble()" class="btn">Print Double</span>

<div id="print-section">
  single print
<div *ngIf="showHideDiv">double print</div>
</div>

我添加了import { Component, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; showHideDiv = false; constructor(private changeDetectorRef: ChangeDetectorRef){} toggle(){ this.showHideDiv = !this.showHideDiv; } printDouble(){ this.showHideDiv= true; this.changeDetectorRef.detectChanges(); this.print(); } printSingle(){ this.showHideDiv= false; this.changeDetectorRef.detectChanges(); this.print(); } print(){ let printContents, popupWin; printContents = document.getElementById('print-section').innerHTML; popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto'); popupWin.document.open(); popupWin.document.write(` <html> <head> <style> body{ width: 99%;} label { font-weight: 400; font-size: 13px; padding: 2px; margin-bottom: 5px; } table, td, th { border: 1px solid silver; } table td { font-size: 13px; } table th { font-size: 13px; } table { border-collapse: collapse; width: 98%; } th { height: 26px; } </style> </head> <body onload="window.print();window.close()">${printContents}</body> </html>` ); popupWin.document.close(); } }并以这种方式使用它，因为它的作用是（基本上）强制渲染某些被阻塞的部分。让我知道是否可以解决此问题，但是在以这种方式进行编辑的stackblitz中，效果很好。

角5中的打印弹出问题

1 个答案: