Keeping CSS in Html to PDF export using Javascript

25,284

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

Share:
25,284
Hamza
Author by

Hamza

A technology geek, working as technical team leader at World Academy

Updated on February 09, 2020

Comments

  • Hamza
    Hamza about 4 years

    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

  • Hamza
    Hamza about 7 years
    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..
  • Mihir
    Mihir over 4 years
    Is this free to use?