CSS rules are not getting applied

[ermarkar]

Thanks for the library. I was using jspdf that was showing black screen. This lib works fine but, the css rules are not getting applied. This is how I am using this with Angular

Installed

yarn add html2pdf.js

and then in my .ts file

import * as html2pdf from "html2pdf.js";

and

var opt = {
            margin: 1,
            filename: 'Invoice.pdf',
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: { scale: 2 },
            jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};

html2pdf(__domElement, opt);

And this is the DOM element

and this is the output

any solutions?

[brendon]

Could it be CORS related?

[ermarkar]

@brendon i don't think so ? Any solution though ?

[brendon]

It looks like your style file isn't being downloaded. I believe that stuff is refetched via html2canvas. Froala passes this extra bit of config to html2pdf:

html2canvas: {
  useCORS: true
}

Give that a try :)

[ermarkar]

It looks like your style file isn't being downloaded. I believe that stuff is refetched via html2canvas. Froala passes this extra bit of config to html2pdf:

html2canvas: {
  useCORS: true
}

Give that a try :)

@brendon not working :(

[eKoopmans]

Hi @ermarkar, sorry you've been having trouble. I suspect this is related to the way nodes are currently cloned in html2pdf.js. If so, it's something I've been meaning to fix for ages.

I've worked out a potential fix but it's not yet fully tested. Could you give it a spin and let me know if it solves your problem? It's here:

html2pdf.js/bugfix/clone-nodes-BUILD

Specifically, you can go into the /dist/ directory and pull out whichever files your project relies on.

[ermarkar]

@eKoopmans Thanks for the reply, Actually the CSS rules that are written in .css files are not getting applied, so i copied directly to my html (inline styling