Export HTML page to PDF on user click using JavaScript

Question

When user click on GeneratePDF button, I need to export the html page into a PDF file. I am successfully exporting HTML page into PDF file but for the first click only I am able to download data into PDF but from the second click I am unable to download the data to PDF file. I am not sure where I went wrong in the code.

Please check the code here:

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

maybe http://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript ? — edotassi, Nov 05 '13 at 10:16
I've rolled the question back as you simply incorporated Kristof answer, making the answer lose its meaning. That's not ok, when you have new questions, ask a new one, don't mutate the original question if it already has answers. Thanks! — brasofilo, Sep 20 '14 at 07:25

Kristof Feys · Accepted Answer · 2017-10-23T15:51:18.787

32

This is because you define your "doc" variable outside of your click event. The first time you click the button the doc variable contains a new jsPDF object. But when you click for a second time, this variable can't be used in the same way anymore. As it is already defined and used the previous time.

change it to:

$(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'); }
        );

    });  
});

and it will work.

edited Oct 23 '17 at 15:51

answered Nov 05 '13 at 10:30

Kristof Feys

1,822
1
19
36

Thank you Kristof Feys, but when I click on the button I can see 2 windows. one is save to PDF window and one more new window is opening with pdf view, How can I remove PDf view in new window... – Navyah Nov 05 '13 at 10:36
Hmmm... when i tested this in jsFiddle i only received the "save to pdf" window. My guess would be that these 2 windows are browser / plugin related... – Kristof Feys Nov 05 '13 at 10:38
Yes, In jsFiddle it is getting only SaveTo PDF window, but in Main Application It is getting one more window opened when user click,How can i remove that new window. – Navyah Nov 05 '13 at 10:42
As I am unable to reproduce your issue, i can't really debug it either. You could probably try to remove all your javascript plugins used (except jquery & jspdf) and see if it works then. Afterwards you can re add them one by one to see which one produces the error (if my guess is correct and one of these are producing the issue of course) ... Or if you could reproduce the issue on jsFiddle that could help as well :) – Kristof Feys Nov 05 '13 at 10:46
You can see in this JSFiddle, when we click on "generate button" it shown 2 windows. one is the window to save the PDF file and another new browser is getting opened with PDF view http://jsfiddle.net/y2b7Q/299/ – Navyah Nov 05 '13 at 10:54
In Firefox it is displaying the new window, but in Chrome its working perfect, but in Safari and IE its not working – Navyah Nov 05 '13 at 11:15
you could try wrapping it in downloadify (cfr this example: https://github.com/MrRio/jsPDF/blob/master/examples/downloadify.html) – Kristof Feys Nov 05 '13 at 11:52
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40560/discussion-between-user178900-and-kristof-feys) – Navyah Nov 05 '13 at 12:07
@KristofFeys : I worked on above sample and it is not working in IE10. And CSS style is not applied in the PDF. How to get the actual CSS styles in PDF and IE10 issue. – selladurai Nov 22 '13 at 07:28
6

$(document).ready(function) and $(function) are identical; http://learn.jquery.com/using-jquery-core/document-ready/ just says, "If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form." – Aaron Feb 28 '14 at 23:56
what does var specialElementHandlers = { '#editor': function (element,renderer) { return true; } }; indicates? – Arj 1411 Aug 17 '16 at 13:02
I've used the the solution above but I'm getting a blank PDF file. When I check the console, I'm getting this error `jsPDF Warning: rendering issues? provide a callback to fromHTML! (anonymous) @ jspdf.debug.js:7747` I am using the jsPDF CDN hosted library What can I do? – Mwas May 07 '17 at 12:20
Just generated a blank pdf. I also get the same error as @Mwas – djack109 Oct 23 '17 at 09:39
@djack109 i've updated the code, if you get a blank pdf, you should try to save the document in a callback function (see example) – Kristof Feys Oct 23 '17 at 15:52

Export HTML page to PDF on user click using JavaScript

1 Answers1

Linked