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 <style>), And now this is working perfectly fine.

Yes sure, I will try the given link as well.

Thanks!!! :)

[eKoopmans]

Glad you got things working! That said, we definitely want external stylesheets to work properly. If you have a chance, please test the other build (with your original stylesheets) and see if it solves things - thanks!

[Zankhna95]

Hi @eKoopmans , I have external scss file and styles are not getting applied while generating pdf? Is there any way to attach '.scss' file in html2pdf.js ?

[brendon]

@Zankhna95, you'd need to compile this to css first at the very least I would say.

[SubhashKocher]

@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 <style>), And now this is working perfectly fine.

Yes sure, I will try the given link as well.

Thanks!!! :)
Hello Champs,
I have html contents with inline styling, for me style is not getting applied to the generated pdf. I have used below options for html2pdf in my react project.
const PDF_OPTIONS = {
margin: [5, 5, 5, 5],
pagebreak: { after: '#pageBreakers' },
image: { type: 'jpg', quality: 0.95 },
html2canvas: { scale: 4, dpi: 192, letterRendering: true, useCORS: true },
jsPDF: { unit: 'pt', format: 'A4', orientation: 'portrait', autosize : false }
};
html2pdf().from(dataContainer, 'element').set(PDF_OPTIONS).to('pdf').save("TermSheet.pdf");
Would you be able to help with any pointer?
I am using below dependencies versions in my react project.
html2pdf.js version = 0.9.2
"es6-promise": "^4.2.5",
"html2canvas": "^1.0.0-alpha.12",
"jspdf": "^1.4.1"

[juansinmiedos]

I came here cause I had a similar issue.

I use Vue as frontend framework, in case you are not familiar typically the structure in a Vue component is as follows

<template>
Here goes your HTML
</template

<script>
Your component data, methods etc
</script>

<styles>
Your CSS
</styles>

When wotking locally, and watching my changes on localhost, I could generate an html (it was dinamically generated by concat string with html code inside) and the styles would apply. But after deploying my brack to test in staging the styles were not applied.

I also solved this by adding inline styles in the html.

Posting this in case you are still looking into this issue.

[tobias-fyi]

I just ran into this issue and happened upon a solution for my particular case.

My case is a 20+ page document generated from an app, with the CSS being compiled from Sass. The doc contains a page for each of ~22 items, with various metrics for each. The styles were working fine when I exported the parent div; once I split up each item onto its own page, I ran into this issue - #19 . I implemented the workaround explained here and here in which each page is generated via a separate canvas. However, selecting the individual items within the parent div rather than the parent div itself caused the styling to break.

What fixed it for me was unnesting the selectors in my Sass files such that the selectors targeting the divs being used for the pdf pages were not nested within any other selector. I.e. they are separate / on the first level / all the way left, etc.

Once I made that switch, the styling started working again in the PDFs.

[dattanaik1211]

Please decrease the value of scale in html2canvas options keep scale:0.8 and try it will work

[vishnudas707]

Please decrease the value of scale in html2canvas options keep scale:0.8 and try it will work

for me it worked. but quality is too low. Also sometime in higher scale I have got correct output.