How to resolve the error: Document not attached to a Window?

Question

I am using html2canvas to convert the html to png, I am getting the following error:

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");
      });

If I pass browser DOM it is Ok, but I need new DOM for some reason that's why I use DOMParser . similar question: Link

Answer 1

There is no proper way to do it now. html2canvas relay on window object attached to element . Because html2canvas already allow passing options related to defaultView through options object, the guard which throw error look like a bug because it should check that all necessary options are passed. So it would be better to open an issue there!

As a workaround if you trust HTML you can try to use hidden iframe but it still should be placed to the document

  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);