Trying to automatically convert this content to a pdf file. Based on how the rest of my code is setup, I have to have the button to click INSIDE the div that I want to export to pdf. Is this a problem? Here's what I have so far. When I click the button, it does nothing.

JS:

<script type="text/javascript" src=".3.4/jspdf.debug.js"></script>

<script>
jQuery('#generatereport').click(function () {
    doc.fromHTML(jQuery('#lppresults').html(), 15, 15, {
        'width': 170
    });
    doc.save('sample-file.pdf');
});
</script>

HTML:

<div class="survey-results" style="display: none;" id="lppresults">
   <button id="generatereport">Download Report</button>
   TEST CONTENT
</div>

Trying to automatically convert this content to a pdf file. Based on how the rest of my code is setup, I have to have the button to click INSIDE the div that I want to export to pdf. Is this a problem? Here's what I have so far. When I click the button, it does nothing.

JS:

<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>

<script>
jQuery('#generatereport').click(function () {
    doc.fromHTML(jQuery('#lppresults').html(), 15, 15, {
        'width': 170
    });
    doc.save('sample-file.pdf');
});
</script>

HTML:

<div class="survey-results" style="display: none;" id="lppresults">
   <button id="generatereport">Download Report</button>
   TEST CONTENT
</div>

• javascript
• jquery
• html
• pdf
• jspdf

Share Improve this question Follow asked Jul 6, 2017 at 21:07 mickdeezmickdeez 51133 gold badges88 silver badges2020 bronze badges 3

• I guess you have JS into .html file? – VictorArcas Commented Jul 6, 2017 at 21:11
• @VictorArcas yes, that is correct – mickdeez Commented Jul 7, 2017 at 18:41
• When I tried there is an error saying .fromHTML is not a function. What could be wrong? – Liaqat A. Commented Aug 23, 2022 at 10:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

No, this is not a problem. You can have the button inside the div element. Though you have some other issues. Here is the revised version of your code ...

var doc = new jsPDF();
$('#generatereport').click(function() {
   doc.fromHTML($('#lppresults')[0], 15, 15, {
      width: 170
   }, function() {
      doc.save('sample-file.pdf');
   });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

<div class="survey-results" id="lppresults">
  <button id="generatereport">Download Report</button> TEST CONTENT
</div>

You need to initialize the jsPDF class : var doc = new jsPDF();

var doc = new jsPDF();
jQuery('#generatereport').click(function() {
  doc.fromHTML(jQuery('#lppresults').html(), 15, 15, {
    'width': 170
  });
  doc.save('sample-file.pdf');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>


<div class="survey-results" id="lppresults">
  <button id="generatereport">Download Report</button> TEST CONTENT
</div>