Javascript 使用 jsPDF 将 html <div> 下载为 pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25698741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
download html <div> into pdf using jsPDF
提问by Joyeeta Sinharay
I am trying to download a div value into PDF using jsPDF here are the code which I have written:
我正在尝试使用 jsPDF 将 div 值下载到 PDF 中，这是我编写的代码：
<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.
但是当点击按钮时什么也没有发生......我已经从这个链接下载了 jsPDF 。
I am clueless of thing can anyone please help me.
我对事情一无所知，任何人都可以帮助我。
回答by diegocr
Pick jspdf.min.jsfrom https://github.com/MrRio/jsPDF/tree/master/dist
匹克jspdf.min.js从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>
....
回答by Harsimran singh
<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.
这是一个 HTML，它的工作原理我测试了很多次。并使用相同的代码。
<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>
