html2pdf.js: CSS rules are not getting applied

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

original

and this is the output

any solutions?

About this issue

Original URL
State: open
Created 5 years ago
Comments: 21 (2 by maintainers)

Most upvoted comments

I had the same issue.

Im using Vue as a fronted framework and I didn’t want to use in-line styles, so I solved by doing the following :

I had this before and it didn’t working:

<template>
    <div ref="toPrint" class="d-none">
        <v-card outlined flat>
            <v-simple-table >
                  ...
            </v-simple-table>
        </v-card>
    </div>
</template>

I remembered that for all classes in Vue to work as expected, they have to be inside the class .v-application, so I did this change:

<template>
    <div ref="toPrint" class="v-application d-none">
        <div class="v-application--wrap">
             <v-card outlined flat>
                  <v-simple-table >
                       ...
                   </v-simple-table>
                </v-card>
          </div>
    </div>
</template>

Once I made that change, the Vue classes started showing in the PDF.

GadielHernandez on Feb 8, 2023

@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!!! 😃

ermarkar on Jun 7, 2019

Is this still an issue? I am not able to see CSS styles in my PDF. I have my styles directly in my html page within <style> tags.

const options = { margin: 1, filename: 'ROI_results.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; const savePDF = function() { html2pdf().set(options).from(element).save(); }

I guess it is, i also have no css here when generating pdf from vue

sicadev on Nov 5, 2022

It was an easier fix for me. I wasn’t seeing any styling, until I realised the CSS was loading after the script.

I put the css above the script and now the PDF is beautiful.

Thanks!

Dnncha on Jan 13, 2022

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

brendon on May 18, 2020