Download PDF is not rendering the complete list of data from ngFor using html2canvas

Question

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.