Menu
I am trying to download a div value into PDF using jsPDF here are the code which I have written:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="jsPDF.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>
But while clicking on the button nothing is happening...I have downloaded the jsPDF from this link.
I am clueless of thing can anyone please help me.
428
Generate PDF using JavaScript The following example shows how to use the jsPDF library to generate PDF file using JavaScript. Specify the content in text() method of jsPDF object. Use the addPage() method to add new page to PDF. Use the save() method to generate and download PDF file.
The HTML Table will be first converted into a HTML5 Canvas using html2canvas plugin and then the HTML5 Canvas will be exported to PDF file using the pdfmake plugin in jQuery. The following HTML Markup consists of an HTML Table and a Button. Explanation: The Export Button has been assigned a jQuery click event handler.
Pick jspdf.min.js from https://github.com/MrRio/jsPDF/tree/master/dist
Then this should work:
....
<script src="jspdf.min.js"></script>
<script>
$(function () {
$('#cmd').click(function () {
var doc = new jsPDF();
doc.addHTML($('#content')[0], 15, 15, {
'background': '#fff',
}, function() {
doc.save('sample-file.pdf');
});
});
});
</script>
....
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<script type="text/javascript" src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#download').click(function() {
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
$("#imgRes").attr("src", imgData);
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
});
});
});//]]>
</script>
and here is a HTML its working i tested it many times. and using this same code.
<img id="imgRes" height="500px" width="770px" />
<div id="canvas" style="background-image:url(fimage/1.jpg)"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<button id="download">Download Pdf</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
