时间戳

首页 > 解决方案 > Angular 6 和 Angular 材料打印一个 div 返回空字段，没有数据，也没有附加 css

angular - Angular 6 和 Angular 材料打印一个 div 返回空字段，没有数据，也没有附加 css

问题描述

我在打印 div 内容时遇到了困难。

div 基于 angular 6 及其相关的 Angular 材质版本。

该 div 具有以下脚本：

 <div class="order-info-container" id="divToPrint">
    <mat-form-field>
    <input matInput placeholder="Name" [value]="info.name" readonly>
    </mat-form-field>                        

    <mat-form-field>
    <textarea matInput placeholder="Address" matTextareaAutosize [value]="info.address" readonly></textarea>
    </mat-form-field>
 </div>

按钮是：

<button mat-raised-button type="button" *ngIf="lat!=0 && lng!=0" (click)="print();">Print Order</button>

print() 的打字稿函数是：

print(){
    let divToPrint = document.getElementById('divToPrint').innerHTML;
    let newWindow = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    newWindow.document.open();
    newWindow.document.write(`
    <html>
        <head>
          <title>Print tab</title>
          <style>

          </style>
        </head>
        <body onload="window.print();window.close()">${divToPrint}   
        </body>
      </html>
    `);
    newWindow.document.close();
  }

结果是没有数据的空文本框，也没有附加 css。

我认为，角度没有显示这两个变量，因为它们是从数据库中导入的。但它们实际上存在于屏幕上。

这是打印页面的图像。空字段，没有附加的角度材料 css。

标签： angularprintingangular-materialangular6

解决方案

推荐阅读