Issues on Exporting dynamically generated div using jspdf in angular2 project

Question

I'm using jspdf to print div s in my project. I recently realized that this doesn't print when a div includes some dynamic contents. What I mean is that if there is a simple angular if statement, jspdf doesn't print it. Here is a sample:

In my HTML:

<div id="content" #content>
   <p>This sections is printed</p>
   <p> {{ item.id }} is also printed</p>
</div>

This code below throws error which can be found below the html code:

<div id="content" #content>
   <p *ngIf="item.id === 'sample'">this is NOT printed</p>
</div>

ERROR TypeError: Cannot read property '1' of undefined at f.renderParagraph (jspdf.min.js:97)...

here is the typescript code I use:

@ViewChild('content') content: ElementRef;    
public downloadPDF () {
    const doc = new jsPDF();
    const specialElementHandlers = {
      '#editor': function(element, renderer) {
        return true;
      }
    };
    const content = this.content.nativeElement;
    doc.fromHTML(content.innerHTML, 15, 15, {
      'width': 190,
      'elementHandlers': specialElementHandlers
    });

    const fileName = 'test';
    doc.save(fileName + '.pdf');
}

Again the first div prints as pdf just fine. But the second div doesn't. I suspect that the issue is angular if statement. But I couldn't find a solution yet. Any help would be appreciated.

Answer 1

Instead of using Structural directive Try This

Hidden Property Binding

<div id="content" #content>
   <p [hidden]="item.id !== 'sample'">this is NOT printed</p>
</div>