I have the below code to download the elements in ngFor as a PDF . My html is a array list of data information rendered using ngFor . I have a downloadPDF function written which accepts the id as a parameter and loops through the array list and has to save entire loop of array data as PDF when I click on the downloadPDF button. I am not s
ure why its saving only the first element from the array finalArList . I have attached the JSON response of finalArList and also the pdf file for reference. Any help on this would be really helpful . I am posting this after lot many tries.enter image description here
downloadPDF() {
html2canvas(document.getElementById('testDiv')).then(function(canvas) {
const img = canvas.toDataURL('image/png');
const doc = new jsPDF();
doc.addImage(img, 'JPEG', 5, 5);
doc.save('testCanvas.pdf');
});
}
HTML:
<div id="testDiv" *ngFor="let finalArList of finalArList">
<div>
<h3>
{{finalArList.dischargeDate}} </h3>
<div>
<div>
<div>
<label>Case number:</label>
</div>
<div>
<span>{{finalArList.caseNo}}</span>
</div>
</div>
<div>
<div>
<label>Patient:</label>
</div>
<div>
<span>{{finalArList.patientName}}</span>
</div>
</div>
<div>
<div>
<label>Hospital:</label>
</div>
<div>
<span>{{finalArList.instName}}</span>
</div>
</div>
<div>
<div>
<label>Payee:</label>
</div>
<div>
<span></span>
</div>
</div>
<div>
<div>
<label>Total Doctor Fee:</label>
</div>
<div>
<span>{{finalArList.formattedTotalDrFee}}</span>
</div>
</div>
<div>
<div>
<label>To be Collected:</label>
</div>
<div>
<span>{{finalArList.formattedDrFeeToCollect}}</span>
</div>
</div>
<div>
<div>
<label>Payor:</label>
</div>
<div>
<span>{{finalArList.payor}}</span>
</div>
</div>
<div>
<div>
<label>Remarks:</label>
</div>
<div>
<span>{{finalArList.remark}}</span>
</div>
</div>
<div>
<div>
Paid
<span></span>
</div>
<div>
Unpaid
<span>{{finalArList.formattedUnpaidAmounr}}</span>
</div>
</div>
<div>
<button>View Payment Details</button>
</div>
</div>
</div>
</div>
<button type="button"(click)="downloadPDF()">Download in PDF</button>
When i do like this html2canvas(document.getElementById('myTable')).then(function (canvas) { console.log('canvas', +canvas); I am getting NaN.
However, if I hover on top of canvas I get a list of objects attached in screennshot for reference.
