Tengo el siguiente código para descargar los elementos en ngFor como PDF. Mi html es una lista de información de datos renderizada usando ngFor. Tengo una función downloadPDF escrita que acepta la identificación como parámetro y recorre la lista de la matriz y tiene que guardar todo el bucle de datos de la matriz como PDF cuando hago clic en el botón downloadPDF. No soy sure por qué está guardando solo el primer elemento de la matriz finalArList. He adjuntado la respuesta JSON de finalArList y también el archivo pdf como referencia. Cualquier ayuda en esto sería realmente útil. Estoy publicando esto después de muchos intentos. Ingrese la descripción de la imagen aquí

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>

Cuando me gusta esto html2canvas (document.getElementById ('myTable')). Luego (function (canvas) {console.log ('canvas', + canvas); obtengo NaN.

Sin embargo, si paso el mouse sobre el lienzo, obtengo una lista de objetos adjuntos en la captura de pantalla como referencia.