html2可以循环或重复使用多个div / html dom元素

Question

我正在尝试使用与jspdf集成的html2canvas打印多个标签。

  printTabsManual() {
    let tabs = document.querySelectorAll('*[id^="GRID_ID-pane"]');
    console.log(tabs.length);
    //const pdf = new jsPDF();
    //console.log(max_h);
    //console.log(max_w);
    let pdf = new jsPDF('l', 'px', [max_h, max_w]);
    for (i = 0; i < tabs.length; i++) {
      html2canvas(tabs[i])
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        pdf.addImage(imgData, 'JPEG', 0, 0);
      });
    }
    pdf.save("Download.pdf");
  }

我能够使用查询选择器获取选项卡的div，如果处理单个div，则没有循环的这段代码确实很好用，但是它会中断，或者可能不适用于多个循环。

我试图查看日志，它无法获取第二个选项卡的div的图像。

不确定我在哪里弄错了。

Answer 1

[执行异步操作的循环...我相信您无意间执行了所有异步任务，然后才继续进行..所以..为此，让我们使用Promise.all：

const tasks = tabs.map(tab => html2canvas(tab))

Promise.all(tasks).then(canvases =>
{
   for (const canvas of canvases)
   {
       const imgData = canvas.toDataURL('image/png');
       pdf.addImage(imgData, 'JPEG', 0, 0);
   }

   pdf.save("Download.pdf");
})

这意味着：执行所有异步任务，然后处理其结果并保存pdf