更改组件中二维码的内容

Question

我正在使用 ngx-qrcode2 在我的 Angular 应用程序中生成 QR 码。我需要做的是将一组二维码附加到 PDF 中并下载该文件。

我循环更改组件中QR的内容。在我的 DOM 中，我看到循环运行时二维码发生了变化。

fruits = ['mango', 'apple', 'orange']

async download() {

    let doc = new jsPDF();

    let imgDataArr = [];

    for (const f of this.fruits) {
      this.qrvalue = f;

      while (!document.querySelector(".qrcode img")) {
        await new Promise(r => setTimeout(r, 500));
        console.log("waiting for qr");
      }
      console.log("QR element is available");

      const qrcode = document.getElementById('qrcode');

      let imageData= this.getBase64Image(qrcode.firstChild.firstChild);

      imgDataArr.push(imageData)
    } 

    for (const data of imgDataArr ) {

      doc.addImage(data, "JPG", 10, 10);   
       doc.addPage();
    }

    doc.save('FirstPdf.pdf');
}

然而，我下载的最终PDF包含三个二维码，其中的数据相同。

这是为什么呢？元素更改之前是否有延迟？如何解决这个问题？

堆栈闪电战

请注意，我的实现很大程度上基于这个答案。

Answer 1

我现在就面临这个问题。有解决办法吗？