Exporting the webpage into pdf file

Question

I am trying to export the webpage(not whole page, but some part of page) into pdf file when user click the button.

But the below code is not working for me. Can any one please help me where I went wrong. I am using jsPDF to export the web page into pdf.

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/jspdf.js"></script>
        <script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
        <script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
        <script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
        <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
        <script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
        <script>
            $(function() {
                var doc = new jsPDF();
                var specialElementHandlers = {
                    '#editor': function(element, renderer) {
                        return true;
                    }
                };

                $('#cmd').click(function() {
                    doc.fromHTML($('#content').html(), 15, 15, {
                        'width': 170,
                        'elementHandlers': specialElementHandlers
                    });
                    doc.save('sample-file.pdf');
                });
            });

        </script>
    </head>
    <body>
        <div id="content">
            <h3>Hello, this is a H3 tag</h3>

            <p>a pararaph</p>
        </div>
        <div id="editor"></div>
        <button id="cmd">generate PDF</button>
    </body>

 </html>

Now my code is working perfectly but not in formatted manner.it just export in normally as like a paragraph.how can i export in formatted manner please suggest me. — user3040433, Jan 16 '14 at 06:58

Vinayak Pingale · Answer 1 · 2014-01-16T06:43:56.467

0

Check the fiddle here :

Fiddle

Is this code of yours from some tutorial.

$(function () {
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });
});

I tried it on Mozilla firefox and your code is working fine. On which browser you are checking cause on my side it is not working on Google chrome.

edited Jan 16 '14 at 06:43

answered Jan 16 '14 at 06:35

Vinayak Pingale

1,315
8
19

Now my code is working perfectly but not in formatted manner.it just export in normally as like a paragraph.how can i export in formatted manner please suggest me. – user3040433 Jan 16 '14 at 06:59
Actually i was using one some Js classes. – user3040433 Jan 16 '14 at 07:01
formatted manner? what kind of formatting you are talking about center,left,right align. I have tried putting table,paragraph, header. there whatever html you write it gets into PDF. – Vinayak Pingale Jan 16 '14 at 07:17
by formatted manner i meant to say that i need to export my pdf in the same designed way as it is showing on my webpage. As for right now its just showing the data but not in the way it is being displayed on my webpage. – user3040433 Jan 16 '14 at 08:21
Refer http://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library – Vinayak Pingale Jan 16 '14 at 09:57
http://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library its also not working. – user3040433 Jan 16 '14 at 11:02

Exporting the webpage into pdf file

1 Answers1