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

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

html2canvs how to loop or reuse for multiple div/html dom elements

javascript

html2canvas

jspdf