Показать страницу только в PDF - PullRequest
Новая
       4

Показать страницу только в PDF

0 голосов
/ 28 марта 2020

У меня есть два раздела на странице 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

1 Ответ

0 голосов
/ 28 марта 2020

Это связано с тем, что вам нужно дождаться следующего цикла обнаружения изменений, чтобы angular успел создать div PDF и заполнить его содержимое. Попробуйте использовать ChangeDetecorRef, чтобы вручную запустить обнаружение изменений для компонента перед выполнением рендеринга PDF

компонента. 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`);
        });
}
...