$(document).ready(function() {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
getCanvas = canvas;
}
});
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$("#cmd").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#cmd").attr("download", "Sample_Pic.png").attr("href", newData);
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none; font: menu; color: ButtonText;
display: inline-block; padding: 2px 8px;
font-size: 13px;
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="alpha1/dist/html2canvas.js"></script>
<script type="text/javascript" src="shot.js"></script>
<link rel="stylesheet" type="text/css" href="shot.css">
<script src=".9.1.js"></script>
<script src="jquery.plugin.html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder" style="background-color: #FFFFFF; width: 500px;
padding-left: 25px; padding-top: 10px;">
<div id="target">
<div id="content">
<h3>Hello, this is mathit app</h3>
<a class="upload">Upload to Formulas</a>
<h2>
This is <b>10th Std Notes</b> <span style="color: red"></span>
</h2>
<p>Study about The polynomial of degree two is called quadratic polynomial and equation corresponding to a quadratic polynomial P(x) is called a quadratic equation in variable x. Thus, P(x) = ax2 + bx + c =0, R is known as the standard form of quadratic
equation. There are two types of quadratic equation. (i) Complete quadratic equation : The equation ax2 + bx + c =0 where a,b,c is not equal to 0. (ii) Pure quadratic equation : An equation in the form of ax2 = 0, a is not equal to 0, b,c is
equal to 0.</p>
</div>
</div>
</div>
<a id="cmd" href="#" class="button">generate PDF</a>
<br/>
</body>
</html>
$(document).ready(function() {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
getCanvas = canvas;
}
});
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$("#cmd").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#cmd").attr("download", "Sample_Pic.png").attr("href", newData);
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none; font: menu; color: ButtonText;
display: inline-block; padding: 2px 8px;
font-size: 13px;
}<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="alpha1/dist/html2canvas.js"></script>
<script type="text/javascript" src="shot.js"></script>
<link rel="stylesheet" type="text/css" href="shot.css">
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="jquery.plugin.html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder" style="background-color: #FFFFFF; width: 500px;
padding-left: 25px; padding-top: 10px;">
<div id="target">
<div id="content">
<h3>Hello, this is mathit app</h3>
<a class="upload">Upload to Formulas</a>
<h2>
This is <b>10th Std Notes</b> <span style="color: red"></span>
</h2>
<p>Study about The polynomial of degree two is called quadratic polynomial and equation corresponding to a quadratic polynomial P(x) is called a quadratic equation in variable x. Thus, P(x) = ax2 + bx + c =0, R is known as the standard form of quadratic
equation. There are two types of quadratic equation. (i) Complete quadratic equation : The equation ax2 + bx + c =0 where a,b,c is not equal to 0. (ii) Pure quadratic equation : An equation in the form of ax2 = 0, a is not equal to 0, b,c is
equal to 0.</p>
</div>
</div>
</div>
<a id="cmd" href="#" class="button">generate PDF</a>
<br/>
</body>
</html>I have some code how to plugin the jquery(or)js link the html2canvas method in this code run the script $ symbol not define are indicate my notepad so how to link and how to download the pdf and png image.please help me its very useful for me.
Share Improve this question asked Aug 19, 2016 at 9:16 Prasanth KlrPrasanth Klr 1311 gold badge3 silver badges9 bronze badges1 Answer
Reset to default 3Try this,if it works for you :
<html>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script
src="http://cdnjs.cloudflare./ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="http://html2canvas.hertzen./build/html2canvas.js"></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 and Image</button>
<br />
<script type="text/javascript">
$(document).ready(function() {
$('#cmd').click(function () {
pdf();
capture();
});
});
function pdf()
{
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
}
function capture() {
html2canvas($('body'),{
onrendered: function (canvas) {
var imgString = canvas.toDataURL("image/png");
var a = document.createElement('a');
a.href = imgString;
a.download = "image.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
});
}
</script>
</body>
</html>