gpt4 book ai didi

javascript - 如何在 html2canvas 中插入 jquery

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:27:50 28 4
gpt4 key购买 nike

$(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 方法运行脚本 $ 符号未定义表示我的记事本所以如何链接以及如何下载 pdf 和 png 图像。请帮助它对我很有用。

最佳答案

试试这个,如果它适合你:

<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>

关于javascript - 如何在 html2canvas 中插入 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39035372/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com