We already have two posts on using JSPDF in Angular application and also how to export a table to PDF. Check these posts first.
Now to export html content.!
Let’s look at the docs first, and here we have a method called html which takes a HTMLElement as the first arg and few config options as the second arg. So, we can try using this method in our Angular application to export any html content, right?.
Say, for example we have our html content in the template file of our Angular application like below.
<div
#rentReceiptsDiv
class="rent-receipts"
*ngIf="resultsCalculated && !errorModel.errorMsg"
>
<div class="receipt" *ngFor="let item of receiptDateRanges">
<div class="row">
<h3>Rent receipt</h3>
</div>
<div class="row pt-2">
<h6 class="fw-light">
from {{ item.fromDate | date : 'dd/MM/yyyy' }} to
{{ item.toDate | date : 'dd/MM/yyyy' }}
</h6>
</div>
<div class="row pt-3">
<div class="fs-6" [innerHTML]="getDescriptionForPreview(item.fromDate, item.toDate)"></div>
</div>
<div class="row pt-5">
<div class="fs-6">Signature</div>
<div class="fs-5">{{ _calculatorInputs?.ownerName }}</div>
<div class="fs-6">{{ _calculatorInputs.ownerPANNumber }}</div>
</div>
</div>
</div>
We want to export the above Html content to the PDF file. But the html method in the JSPDF is expecting HTMLElement so to get this object instance of our html content we need to declare the above div element in our component by referencing the id rentReceiptsDiv, so let’s do that.
@ViewChild('rentReceiptsDiv') rentReceiptsDiv: ElementRef;
The ViewChild decorator queries our html template file for the provided id and maintains the reference to it. So, now we have the element reference of our div element that we want to export to PDF. Now, let’s try to export using the html method of the JSPDF library.
downloadReceipts() {
const fileName = `${this.title}.pdf`;
const doc = new jsPDF();
doc.html(this.rentReceiptsDiv.nativeElement as HTMLElement, {
callback: (d) => {
d.save(fileName);
},
margin: 0,
autoPaging: true,
width: 200,
windowWidth: this.rentReceiptsDiv.nativeElement.clientWidth,
x: 5,
y: 0,
});
}
As you can see I am making use of the callback function of the html method to export the PDF (save) once it’s ready. I am also passing the div Html element in to the function.
There are also few Html config options you need to be aware of.
Below is the html function definition from the docs.
// jsPDF plugin: html
html(src: string | HTMLElement, options?: HTMLOptions): HTMLWorker;
Also the HTMLOptions definition is as below…We are making use of few of these options, like callback, width, windowWidth. You may have to try few times with these options to get the html rendered correctly.
export interface HTMLOptions {
callback?: (doc: jsPDF) => void;
margin?: number | number[];
autoPaging?: boolean | "slice" | "text";
filename?: string;
image?: HTMLOptionImage;
html2canvas?: Html2CanvasOptions;
jsPDF?: jsPDF;
x?: number;
y?: number;
width?: number;
windowWidth?: number;
fontFaces?: HTMLFontFace[];
}
Checkout complete code base here.
Kumar Gandhi Koppolu 