Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keeping CSS in Html to PDF export using Javascript

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

like image 261
Hamza Avatar asked Feb 08 '17 14:02

Hamza


People also ask

How do I save a webpage as a PDF in JavaScript?

To save HTML page as PDF using JavaScript, we can use the html2pdf library. const element = document. getElementById("element-to-print"); const opt = { margin: 1, filename: "myfile.

Can you create a PDF in JavaScript?

js Use Cases. The html2pdf. js library relies on pure JavaScript to create a PDF. As a result, html2pdf embeds directly client-side, in the browser.


1 Answers

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

like image 136
Louise Godec Avatar answered Oct 07 '22 01:10

Louise Godec