下载PDF未呈现使用html2canvas的NGF数据的完整列表

我有以下代码以PDF格式下载ngFor中的元素。MyHTML是使用ngFor呈现的数据信息的数组列表。我编写了一个downloadPDF函数，它接受id作为参数，并在数组列表中循环，当我单击downloadPDF按钮时，必须将整个数组数据循环保存为PDF。我不知道为什么它只保存数组finalArList中的第一个元素。我已经附上finalArList的JSON响应和pdf文件供参考。这方面的任何帮助都会非常有用。我在多次尝试后发布此内容。请在此处输入图像描述

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>

下载PDF（）{
html2canvas（document.getElementById（'testDiv'））。然后（函数（canvas）{
const img=canvas.toDataURL（'image/png'）；
const doc=new jsPDF（）；
文件添加图像（img，'JPEG'，5,5）；
doc.save（'testCanvas.pdf'）；
});
}
HTML:
{{finalArList.dischargeDate}
案件编号：
{{finalArList.caseNo}
病人：
{{finalArList.patientName}
医院：
{{finalArList.instName}
收款人：
医生总费用：
{{finalArList.formattedTotalDrFee}}
待收集：
{{finalArList.formattedDrFeeToCollect}
付款人：
{{finalArList.payer}}
评论：
{{finalArList.remark}
支付
不付报酬的
{{finalArList.formattedUnpaidAmounr}}
查看付款详细信息
下载PDF格式

当我喜欢这个html2canvas（document.getElementById（'myTable'））时。然后（函数（canvas）{ log（'canvas'，+canvas）； 我要走了

然而，若我将鼠标悬停在画布上，我会得到一个ScreenShot中附加的对象列表，以供参考

---

对我的问题有什么评论吗？伙计们！！有什么解决方案吗？我试图将id更改为classname，但我遇到了排版错误。您好：）！目前的问题远没有提供足够的信息。试着想象一下，像我们一样，你对你的项目一无所知。现在，你是否理解你自己的问题，或者知道问题可能来自何方？例如，我不知道完整的数据列表和不完整的数据集是什么样子。我们是好的king关于pdf中的数据，对吗？关于API返回数据的console.log呢，数据至少在这一步完成了还是丢失了？tatsu我编辑了我的问题，并给出了回答和更多细节。在这

中（函数（画布）{

console.log

canvas

查看您得到了什么。并将其添加到您的问题中。