Convert HTML Div to PDF via Jquery

Question

Im trying to convert my div to PDF.

this is my HTML code:

I can download it just fine but I want to show in the PDF file the Div float:left is 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 show the Div left in the first row, and the Div right in the next row. Help Please.

As long as I know jspdf does not support any kind of css. I had to ditch it out of my current project because of this and return to server side pdf generation. — Max Novich, Jun 04 '15 at 08:09
possible duplicate of [Exporting PDF with jspdf not rendering CSS](http://stackoverflow.com/questions/25946275/exporting-pdf-with-jspdf-not-rendering-css) — Max Novich, Jun 04 '15 at 08:13
We have added some support for floats in css-to-pdf shown here. There are some issues with retained container heights that we would need to fix but this sample shows floats, css and PDF ... http://www.cloudformatter.com/CSS2Pdf.Demos.Float — Kevin Brown, Jun 04 '15 at 19:26

score 0 · Accepted Answer · edited May 23 '17 at 12:09

0

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

But I found this post which has a reference for HtmlToCnavas plugin which could help.

edited May 23 '17 at 12:09

Community

1
1

answered Jun 04 '15 at 08:13

Max Novich

1,169
9
20

score 0 · Answer 2 · answered Jun 04 '15 at 09:38

0

As i know javascript can not generate full page html with css to PDF.

If your project written by PHP in back-end, dompdf will help you.

Notice: CSS float is not supported (but is in the works).

answered Jun 04 '15 at 09:38

Patrick Nguyen

1
3

score 0 · Answer 3 · answered Aug 21 '16 at 05:44

<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>

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge. — Brian Tompsett - 汤莱恩, Aug 21 '16 at 12:00

Convert HTML Div to PDF via Jquery

3 Answers3