仅以 PDF 显示页面

Question

我在 HTML 页面中有两个部分。 一个用于获取值，另一个用于 PDF 视图。 由于两者在同一页面中，我希望始终隐藏 PDF 视图。 只有当有人点击Generate PDF ，它才应该是 PDF。

   <div class="col-12">
    <input [(ngModel)]="fName" name="fname" placeholder="First Name">
    <input [(ngModel)]="LName" name="lname" placeholder="Last Name">
    </div>

    <div #PDF>
    <p>My Name is</p> 
    <p>{{fName}} {{lName}}<p>
    </div>

<button class-"btn btn-primary" type="submit" (click)="pdfMethod">PDF</button>

TS

import * as jsPDF from 'jspdf' 
  @ViewChild('PDF') PDF: ElementRef;

  pdfMethod(){
    var pdf = new jsPDF('p', 'pt', 'letter');
    pdf.addHTML(this.PDF.nativeElement, () => {
      pdf.save(`sum.pdf`);
    });
  }

我希望输入字段首先可见，如果他们单击按钮，则以 pdf 格式显示#PDF。 我使用过*ngIf但它显示native element not defined

Answer 1

这是因为您需要等待下一个更改检测周期，以便 angular 有时间创建 PDF div 并填充其内容。 尝试在进行 PDF 渲染之前使用 ChangeDetecorRef 手动触发组件的更改检测

组件.html

<div #PDF *ngIf="showPDF">
<p>My Name is</p> 
<p>{{fName}} {{lName}}<p>
</div>

<button class="btn btn-primary" type="submit" (click)="pdfMethod()">PDF</button>

组件.ts

import { Component,ViewChild,ElementRef, ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef){}

showPDF = false;
@ViewChild('PDF') PDF: ElementRef;
//@ViewChild('PDF', {static: false) PDF: ElementRef;//for angular 9

pdfMethod()
{
    this.showPDF = true;
    this.cdr.detectChanges();
        var pdf = new jsPDF('p', 'pt', 'letter');
        pdf.addHTML(this.PDF.nativeElement, () => {
          pdf.save(`sum.pdf`);
        });
}