Geek Answers Handbook

Convert HTML Div to PDF via jQuery

I am trying to convert my div to pdf.

this is my html code:

I can download it just fine, but I want to show in a PDF file Div float: left aligned with Div Float: right.

<script lang="javascript" type="text/javascript"> function run() { var pdf = new jsPDF('p', 'pt', 'letter'), source = $('#content')[0], margins = { top: 40, bottom: 40, left: 40, right: 40, width: 522 }; pdf.fromHTML( source, margins.left, margins.top, { 'width': margins.width }, function (dispose) { pdf.save('Test.pdf'); }, margins ); }; </script type = "text/javascript"> 
 <!doctype html> <html> <head> <meta charset="utf-8"> <title>html2pdf</title> <body> <div id="content" style = "width: 100px"> <div id = "name" style="float:right"> <div id ="rey"> Rey </div> <div id ="norbert"> norbert </div> </div> <div id = "age" style="float:left; width:50px">age</div> </div> <div id = "button" style ="margin-top:50px"> <button id="cmd" onclick ="run()">generate PDF</button> </div> <script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script> <script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script> </body> </html>

Right now, it shows Div on the left in the first line, and Div on the right in the next line. Please help me.

+7
html pdf
source share
3 answers

as I stated in the comments, jspdf does not support css as is.

But I found this post that has a link to HtmlToCnavas that might help.

0
source share

As I know, javascript cannot generate full html pages using css to PDF.

If your project is written by PHP in the background, dompdf will help you.

Note: CSS float is not supported (but works).

0
source share

 <script lang="javascript" type="text/javascript"> function run() { var pdf = new jsPDF('p', 'pt', 'letter'), source = $('#content')[0], margins = { top: 40, bottom: 40, left: 40, right: 40, width: 522 }; pdf.fromHTML( source, margins.left, margins.top, { 'width': margins.width }, function (dispose) { pdf.save('Test.pdf'); }, margins ); }; </script type = "text/javascript"> 
 <!doctype html> <html> <head> <meta charset="utf-8"> <title>html2pdf</title> <body> <div id="content" style = "width: 100px"> <div id = "name" style="float:right"> <div id ="rey"> Rey </div> <div id ="norbert"> norbert </div> </div> <div id = "age" style="float:left; width:50px">age</div> </div> <div id = "button" style ="margin-top:50px"> <button id="cmd" onclick ="run()">generate PDF</button> </div> <script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script> <script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script> </body> </html>
0
source share

More articles:


All Articles