How to include angular components in doc.fromhtml() jspdf? - html

Question

I am trying to generate a pdf which includes angular components.
typescript:
let doc = new jsPDF();
let source = document.getElementById("content");
doc.fromHTML(
source,
15,
15,
{
'width': 180
});
doc.save("sample.pdf");
}
}
html:
<div id="content">
<sample-card *ngFor="let x of list; let i = index"
[selection] = list
<sample-card>
</div>
I am using Angular 4
doc.fromHTML() is working for simple 'div' like To be downloaded. But its not working for angular components. How to achieve this?

Answer 1

I did in this way ,
Passsing values in app html to the details, where it display those values in details html
In app.component.html
<div id="content" details [app1]="app" *ngFor="let app of applications">
In details.component.html
{{app1.labels}}
Here i'm waiting to get the data to be loaded[Tried with AfterViewChecked -- keeps on saving files and AfterViewInit is giving null (as it is executing only once)]
So waited for Random time say 5 sec[not good but its downloading the file]
setTimeout(()=>{
setTimeout(this.saveFile(), 1000*5);
},3000);
Here is the output i got[on left pdf and on right webpage with some extra content]
For the id on top div
<div id="content" >
Things to Learn
<div details [app1]="app" *ngFor="let app of applications">
</div>
Hari
</div>
Output is:
Method-2 :
Here i am using event emitter to tell parent when to save the file
when the child component receives the final item from the array of items [passed by parent to child] ,telling parent to save the file now [as i have received all of your items in the array]
Implemented with AfterViewInit where it emits true when length and count are same
On left html and on right ts [of parent]
on left ts and on right html [of child]
Output