Background color is not correctly passed to html2canvas

[milos-popadic]

I have a need to color the pdf background color. My content does not take full pages and I need to set the color of the remainder of the page to match my contents background.

I made 2 code pens:

html2canvas: https://codepen.io/Beckilicki/pen/eYBKRGP

html2pdf.js: https://codepen.io/Beckilicki/pen/bGBKRRR

On first one when I change the "backgroundColor" property it takes effect, while on the second one it does not. I have looked through similar issues but without much luck.

I have tried:

• using background property instead of "backgroundColor",
• setting "allowTaint" property to true
• setting "removeContainer" property to true
• combinations of the above

Any help on this issue would be greatly appreciated.

[qnxdev]

Did you find it?

[markusv]

having the same problem. Did you ever figure this out?

[AlexanderMoroz]

Also spend few hours to figure this out...

Looks like backgroundColor property which is correctly passed to html2canvas overrides buy background, that comes from container, which html2pdf.js creates when copy dom node for conversion. Simple workaround - is to clone your element before passing it to html2pdf and add style.backgroundColor = '#yourcolor' to it. Something like

example from my react app:

 const handlePdfClick = async (e) => {
    const htmlContent = ref.current.cloneNode(true);
    htmlContent.style.backgroundColor = '#3f2782';
    await html2pdf().set(options).from(htmlContent).save();
  }