Keeping CSS in Html to PDF export using Javascript

Question

I am trying to generate PDF using JavaScript but I am unable to generate on with CSS. I am currently using jsPDF. The issue with jsPDF is that it takes away all the formatting. I don't need styles or colors but I need to have multiple divs side by side.

My code is

                    margins = {
                        top: 0,
                        bottom: 0,
                        left: 20,
                        width: 170
                    };                       
                    pdf.setFontSize(6);
                    pdf.fromHTML(
                        $('#textpdfdiv').html(), 
                        margins.left, 
                        margins.top, { 
                            'width': margins.width
                        },

                        function (dispose) {                                
                            pdf.save('Export_Text.pdf');
                        }, margins
                    );

textpdfdiv is an id of div that has all the values of form in separate divs side by side. But when I generate PDF, they go into separate row.

I can't use XEPOnline because it processes online.

How I need PDF output is something like this (minus the colors and form fields etc)

The output that I currently have is

Is there any plugin that converts HTML+CSS to PDF? Or can I achieve this with jsPDF? I don't have a table so this Question doesn't help as well.

EDIT: I can't use Html2Canvas as well because it creates long non searchable PDFs and I need searchable PDFs. Html2Canvas takes screenshot and it is an image but I need text that can be copied.

Thank you,
Hamza

I assume this needs to happen automatically? I only ask because the only way I know how is to format your CSS with @print media query and actually print the page (output to PDF). I'm sure this doesn't help, but maybe this can get you to the right track? — ntgCleaner
– ntgCleaner, Commented Feb 8, 2017 at 14:25
no actually print doesn't help... because it doesn't support all browsers secondly I only need few things.. this creates over 50 MB of PDF — Hamza
– Hamza, Commented Feb 8, 2017 at 15:37

Louise Godec · Accepted Answer · 2017-02-08 15:43:06Z

5

I used this plugin to generate PDF with HTML and CSS. You just have to include the content, you want to put in PDF, in a "" with an id.

https://github.com/Xportability/css-to-pdf

answered Feb 8, 2017 at 15:43

Louise Godec

2491 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mihir Over a year ago

Is this free to use?

misterwolf · Accepted Answer · 2017-02-08 15:09:17Z

0

maybe i could not to be of such help, but it seems to be a bug of that library: https://github.com/MrRio/jsPDF/issues/91

In that page you'll find a suggestion for your purpose: to use Html2Canvas.

edited Feb 8, 2017 at 15:09

answered Feb 8, 2017 at 14:54

misterwolf

4244 silver badges14 bronze badges

1 Comment

Hamza Over a year ago

Thank you but this doesn't help.. I have used that as well and Html2Canvas creates long non search able PDFs, I need searchable PDFs. Html2Canvas basically takes screenshot and it is an image not text..

Collectives™ on Stack Overflow

Keeping CSS in Html to PDF export using Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related