Convert HTML to PDF in Angular 10

user_9380480 0
Viewed 4608
  1. I'm trying to generate a PDF out of my HTML page. This works fine if the data is bind to td directly from ts. If I try to bind the value to input, it doesn't read that. Below is the working Stackblitz for the same.
  2. If I try to generate PDF to my complete page the structure changes. It works perfect only for table. I'm using jsPDF for all the above. Is there any way so that I can print my complete page and generate a data URI?
jspdf angular typescript
1 Answers

Try this

html

<td id="myTd"><input [(ngModel)]="userName" type="text" 
[value]="userName"></td>

ts

export class AppComponent  {
  name = 'Angular Html To Pdf ';
  userName: string;

  @ViewChild('pdfTable', {static: false}) pdfTable: ElementRef;


  public downloadAsPDF() {
    const doc = new jsPDF();

    var x = document.getElementById("myTd");
    x.innerHTML = this.userName;

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const pdfTable = this.pdfTable.nativeElement;

    doc.fromHTML(pdfTable.innerHTML, 15, 15, {
      width: 190,
      'elementHandlers': specialElementHandlers
    });

   console.log(doc.output('dataurl'));
   console.log(this.userName);


  }
}

https://stackblitz.com/edit/angular-html-to-pdf-m-oeji6j?file=src%2Fapp%2Fapp.component.html

user_94236430
Related