javascript - html2canvas 如何循环或重用多个 div/html dom 元素

Question

我正在尝试使用 html2canvas 与 jspdf 集成来打印多个选项卡。

  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