Keeping CSS in Html to PDF export using Javascript

Hamza picture Hamza · Feb 8, 2017 · Viewed 22.6k times · Source

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

Answer

Louise Godec picture Louise Godec · Feb 8, 2017

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