javascript - 如何解决错误: Document not attached to a Window?

Question

我正在使用html2canvas要将 html 转换为 png，我收到以下错误:

html2canvas.min.js:20 Uncaught (in promise) Error: Document is not attached to a Window
    at html2canvas.min.js:20:193237
    at html2canvas.min.js:20:1976
    at Object.next (html2canvas.min.js:20:2081)
    at html2canvas.min.js:20:1023
    at new Promise (<anonymous>)
    at a (html2canvas.min.js:20:774)
    at Vs (html2canvas.min.js:20:192912)
    at html2canvas.min.js:20:196186
    at takeScreenShot (set style [modal].html:94:7)
    at action (set style [modal].html:68:11)

 let htmlString = document.documentElement.innerHTML;
 let virtualDom = new DOMParser().parseFromString(htmlString, "text/html");
 html2canvas(virtualDom.body).then((canvas) => {
       let base64image = canvas.toDataURL("image/png");
      });

如果我传递浏览器 DOM，那就没问题，但由于某种原因我需要新的 DOM，这就是我使用 DOMParser 的原因。 类似的问题:Link

Answer 1

现在没有合适的方法来做到这一点。 html2canvas relay on window object attached to element 。因为 html2canvas 已经允许 passing options通过选项对象与defaultView相关，抛出错误看起来像一个错误的守卫，因为它应该检查是否传递了所有必要的选项。所以最好在那里打开一个问题!

作为一种解决方法，如果您信任 HTML，您可以尝试使用隐藏的 iframe，但它仍然应该放置在文档中

  const html = "<div>Hello World!</div>";
  const iframe = document.createElement("iframe");
  document.body.appendChild(iframe); // 👈 still required
  iframe.contentWindow.document.open();
  iframe.contentWindow.document.write(html);
  iframe.contentWindow.document.close();
  html2canvas(iframe.contentWindow.document.body);