Element styling only for html2canvas?

[thesciz]

I'm using the handy data-html2canvas-ignore tag on a few elements, but Firefox is giving me problems with elements with negative margins. I'd like to be able to add an html2canvas-only style tag for a particular element, such as: data-html2canvas-style="margin-left: 0".

Has anyone else had any luck doing something like this?

[niklasvh]

You can modify the contents of the document (which is a clone of the original) that will get rendered with the onclone option, for example:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

[thesciz]

Thanks Nik! Greatly appreciate your work on this library. Is this in the documentation?

[niklasvh]

No, unfortunately not. The documentation is greatly lacking in many respects at the moment...

[saksham-sg01]

My downloaded image isn't getting the proper styling so I'm using computed-style-to-inline-style to render it properly by converting all the styling to inline css. But the issue with that is it's affecting the original dom. So I want to do it for the cloned element instead inside the onclone function but it's not working and the image isn't properly styled. Any idea why it's happening?

[akyenze]

I tried to do the same thing, here is how I implemented it and all my styles were properly downloaded:

const computedStyleToInlineStyle = require("computed-style-to-inline-style");

 html2canvas(document.querySelector(".someclass"), {onclone: function(document) {
     computedStyleToInlineStyle(document.querySelector(".someclass"), {
          recursive: true
      });
    }}).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        ...
    });

[reslear]

another way, my solution:

add to element for example :
data-html2canvas-class="!transform-none"

      onclone: (document) => {
        const els = document.querySelectorAll(
          '[data-html2canvas-class]',
        ) as NodeListOf<HTMLElement>

        els.forEach((el) => {
          const payloadClasses = el.getAttribute('data-html2canvas-class')
          if (payloadClasses) {
            el.className = [el.className.trim(), payloadClasses.trim()].join(
              ' ',
            )
          }
        })
      },