如何使用jspdf在同一文件中添加不同的div
如何使用jspdf在同一文件中添加不同的div
提问于 2017-07-13 13:52:30
我想要将html中带有id="page2“的另一个div转换为图像，并将其添加到同一pdf文件中的另一个页面上。这是我的代码：
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
function genPDF() {
html2canvas(document.getElementById('hoja1'),{
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var doc= new jsPDF();
doc.addImage(img,'JPEG',0,0,210,230);
doc.save('ContratoMutuo.pdf');
}
});
}
</script>但仅适用于一个div
html代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file</title>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
function genPDF() {
html2canvas(document.getElementById('hoja1'),{
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var doc= new jsPDF();
doc.addImage(img,'JPEG',0,0,50,50);
doc.save('test.pdf');
}
});
}
</script>
</head>
<body>
<div id="hoja1">
<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 BGCOLOR="red">prueba </TD>
<TD WIDTH=100 BGCOLOR="yellow">prueba </TD>
<TD WIDTH=100 BGCOLOR="gray">prueba </TD>
</TABLE>
</div>
<div id="hoja2">
<TABLE WIDTH=300 HEIGHT=200>
<TD width=100 BGCOLOR="green">prueba </TD>
<TD WIDTH=100 BGCOLOR="blue">prueba </TD>
<TD WIDTH=100 BGCOLOR="gray">prueba </TD>
</TABLE>
</div>
<a href="javascript: genPDF()">DOWNLOAD PDF</a>
</body>
</html>完整的文件应该是：
和2/2
在同一文件中，请帮助！谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-13 16:03:45
如果我正确地理解了你正在尝试归档的是什么，这是可行的：
function genPDF() {
html2canvas(document.getElementById('hoja1'),{
onrendered: function (canvas) {
html2canvas(document.getElementById('hoja2'),{
onrendered: function (canvas2) {
var img = canvas.toDataURL("image/png");
var doc= new jsPDF();
doc.addImage(img,'JPEG',0,0,210,230);
var img2 = canvas2.toDataURL("image/png");
doc.addPage();
doc.addImage(img2,'JPEG',0,0,210,230);
doc.save('ContratoMutuo.pdf');
}
});
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45072398
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号