$(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.com/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>
我有一些代码如何插入jquery（或）js链接html2canvas方法在此代码中运行脚本$ symbol not define指示我的记事本如此链接以及如何下载pdf和png image.please help我对它非常有用。
答案 0 :(得分：1)
试试这个，如果它适合你：
<html>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="http://html2canvas.hertzen.com/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>