Currently, I am faced with a challenge of exporting a formatted HTML table of nearly 200 rows to PDF using the jsPDF library. The current approach involves creating a PDF that cuts off rows at the default height, resulting in the content flowing over to the next page.
makePdf() {
var elWidth = this.el.nativeElement.getBoundingClientRect().width
var elHeight = this.el.nativeElement.getBoundingClientRect().height
this.loadingSubject.next(true)
this.zone.run(() => {
let pdf = new jsPDF({
orientation: 'l',
unit: 'px',
format: [elWidth, elHeight],
compress:true
});
pdf.html(element.nativeElement, {
callback: (pdf) => {
pdf.save('sample.pdf');
}
})
})
}
The solution I am exploring involves separating the rows into chunks of 13 each and appending table and thead tags to create separate tables on each page. However, any changes made to el.nativeElement directly affect the DOM structure. Is there an alternative method in Angular where I can manipulate the HTML without impacting the DOM?