javascript - 画布没有在“屏幕外”获取文档 - React + html2canvas + jsPDF

Question

我有一个问题，我已经在整个互联网上搜索，但我没有找到任何可以帮助我的东西。

我想要什么：

我想同时导出不同“组件”中的多个页面。

例如：

我有 2 页：

第 1 页：

<div>
  <div id='DOWNLOAD' <somestyles>>
    <h1> HI GUYS </h1>
  </div>
</div>

第2页：

<div>
  <div id='DOWNLOAD' <somestyles>>
    <h1> HELLO WORLD </h1>
  </div>
</div>

我有这个功能：

let divs;
useEffect(() => {
  divs = document.querySelectorAll('#DOWNLOAD');
})

const addNewPages = [...divs].map(async(input, i) => {
  const firstPage = i === 0 ? true : false
  const element = divs[i] as HTMLElement;

  return await html2canvas(element)
    .then(async(canvas) => {
      if (!firstPage) await pdf.addPage()
      const imgData = await canvas.toDataURL(`image/png`);
      pdf.addImage(imgData, 'PNG', 0, 0, 210, 230);
      alert('added')
    })
});

Promise.all([...addNewPages]).then(() => {
  pdf.save("download.pdf");
})

问题是： 如果这个函数在第 1 页，我只是从第 1 页获取数据，而第 2 页的数据为空，如果函数在第 2 页，行为相同。

我不知道为什么。这两个组件是同一个组件的子组件，但我一次只显示一个。

例如：如果我显示第 1 页，我不会显示第 2 页

有人可以帮助我吗？

我可以通过获取 HTML 文档，document.querySelectorAll('#DOWNLOAD');但是当我放入 html2canvas(this element) 时，它变成了空的。

标签： javascriptreactjscanvasjspdfhtml2canvas