jsPdf 在中等屏幕（如笔记本电脑）中工作时工作正常，但从显示器屏幕下载的 pdf 未正确对齐

Question

这是下面的代码，我使用 html2canvas 将 html 转换为 pdf 。这里的 pdf 下载在中等屏幕中按预期下载，但当从大屏幕渲染时也是如此。在 pdf 中，有几页出现空白内容并且顺序被打乱。对于设置相同的所有屏幕，如何解决此问题。

这是我的 pdf 下载代码。

setTimeout(()=>{
        var doc = new jsPDF('l', 'mm','letter',true);
        const htmlInput:any=document.querySelectorAll('.myDiv')
        for(let i=0; i<htmlInput.length;i++)
        {
          html2canvas(htmlInput[i], {  
            // scale: 2,    
            onclone: function (clonedDoc) {
              clonedDoc.getElementById("selfAssessment").style.display = "block";
            },
           
          }).then(async (canvas) => {
            var imgWidth = 219;
            var imgHeight = canvas.height * imgWidth / canvas.width;
            doc.addImage(canvas.toDataURL('image/png'), 'PNG', 30, 10, imgWidth, imgHeight);
            if(i+1==htmlInput.length)
            {
              doc.save('data.pdf');
            }
           else
            {
              doc.addPage()
            }
   
          });
        }     
     
    },2000)

Answer 1

我们正在运行一个 for 循环并加载

asynchronous

调用，但我们应该注意，它们在任意时间完成，这导致了我相信的问题，解决方案可以使用

async

和

await

来等待一个序列完成后再执行另一序列。

  sequence = async () => {
    var doc = new jsPDF('l', 'mm','letter',true);
    const htmlInput:any=document.querySelectorAll('.myDiv')
    for(let i=0; i<htmlInput.length;i++) {
      const canvas = await html2canvas(htmlInput[i], {  
        // scale: 2,    
        onclone: function (clonedDoc) {
          clonedDoc.getElementById("selfAssessment").style.display = "block";
        },
      });
      var imgWidth = 219;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      doc.addImage(canvas.toDataURL('image/png'), 'PNG', 30, 10, imgWidth, imgHeight);
      if(i+1==htmlInput.length)
      {
        doc.save('data.pdf');
      }
     else
      {
        doc.addPage()
      }
    }
  }