Back

Explore Courses Blog Tutorials Interview Questions

Export html page to pdf on user click using Javascript

0 votes
2 views
in Java by (9.5k points)

Below is my code to export HTML page into a PDF file when the user click on GeneratePDF button: 

$(function() {

  var doc = new jsPDF();

  var specialElementHandlers = {

    '#editor': function(element, renderer) {

      return true;

    }

  };

  $('#cmd').click(function() {

    doc.fromHTML($('#target').html(), 15, 15, {

      'width': 170,

      'elementHandlers': specialElementHandlers

    });

    doc.save('sample-file.pdf');

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>

<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js

"></script>

<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>

<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>

<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>

<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>

<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js"></script>

<script type="text/javascript" src="js/basic.js"></script>

<body id="target">

  <div id="content">

    <h3>Hello, this is a H3 tag</h3>

    <a class="upload">Upload to Imgur</a> 

    <h2>this is <b>bold</b> <span style="color:red">red</span></h2> 

    <p>Feedback form with screenshot This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation

      as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. How does it work? The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the

      DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send. It does not require any rendering

      from the server, as the whole image is created on the clients browser. No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9

    </p>

  </div>

  <button id="cmd">generate PDF</button>

</body>

</html>

The code works fine for the first time. When I try to convert the HTML page into a PDF file for the second time, it doesn’t work. Can you please tell me what I’m doing wrong? 

1 Answer

0 votes
by (19.7k points)

You need to declare the “doc” variable outside the click event. When the button is clicked for the first time, the doc variable contains a new jsPDF object. So when you click for the second time, it’s defined already and can’t be used.

Check the code below:  

$(function () {

    var specialElementHandlers = {

        '#editor': function (element,renderer) {

            return true;

        }

    };

 $('#cmd').click(function () {

        var doc = new jsPDF();

        doc.fromHTML(

            $('#target').html(), 15, 15, 

            { 'width': 170, 'elementHandlers': specialElementHandlers }, 

            function(){ doc.save('sample-file.pdf'); }

        );

    });  

});

Interested in Java? Check out this Java tutorial by Intellipaat. 

Related questions

0 votes
1 answer
Export HTML page to PDF on user click using JavaScript.
asked Mar 28, 2021 in Web Technology by Jake (7k points)
0 votes
1 answer
Generate pdf from HTML in div using Javascript
asked Jan 25, 2021 in Java by dante07 (13.1k points)
0 votes
1 answer
How to refresh a page using javascript or html?
asked Feb 26, 2021 in Web Technology by rahulnayar01123 (6.1k points)
0 votes
1 answer
How to convert HTML to PDF using iText.
asked Mar 17, 2021 in Java by Jake (7k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...