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() {_x000D_
var doc = new jsPDF();_x000D_
var specialElementHandlers = {_x000D_
'#editor': function(element, renderer) {_x000D_
return true;_x000D_
}_x000D_
};_x000D_
$('#cmd').click(function() {_x000D_
doc.fromHTML($('#target').html(), 15, 15, {_x000D_
'width': 170,_x000D_
'elementHandlers': specialElementHandlers_x000D_
});_x000D_
doc.save('sample-file.pdf');_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>_x000D_
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>_x000D_
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>_x000D_
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js_x000D_
"></script>_x000D_
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>_x000D_
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>_x000D_
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>_x000D_
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>_x000D_
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js"></script>_x000D_
<script type="text/javascript" src="js/basic.js"></script>_x000D_
_x000D_
<body id="target">_x000D_
<div id="content">_x000D_
<h3>Hello, this is a H3 tag</h3>_x000D_
<a class="upload">Upload to Imgur</a> _x000D_
<h2>this is <b>bold</b> <span style="color:red">red</span></h2> _x000D_
<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_x000D_
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_x000D_
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_x000D_
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_x000D_
</p>_x000D_
_x000D_
</div>_x000D_
<button id="cmd">generate PDF</button>_x000D_
</body>_x000D_
_x000D_
</html>This question is related to
javascript
jquery
jspdf
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.
Source: Stackoverflow.com