仅以 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 手动触发组件的变化检测

component.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>

component.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`);
        });
}

仅以 PDF 格式显示页面

Show page only in PDF

javascript

pdf

jspdf

typescript

angular