5

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

Community
  • 1
  • 1
Hamza
  • 1,593
  • 2
  • 19
  • 31
  • 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 Feb 08 '17 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 Feb 08 '17 at 15:37
  • Any solution you found? – Mihir Nov 27 '19 at 17:37

2 Answers2

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

Louise Godec
  • 249
  • 1
  • 2
  • 11
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.

misterwolf
  • 424
  • 4
  • 14
  • 8
    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.. – Hamza Feb 08 '17 at 15:38