我有一个名为
var = pictureModelHtml;
我有一个for循环,可创建画布并在每个画布上绘制图片。
for (i = 0; i < 10; i++) {
pictureModelHtml += '<div class="canvas" id="'+id+'"></div>;
pictureModelHtml += '<canvas id="'+uniqueId+'">picutre</canvas>';
}
$('.canvas').each(function(i) {
//do something that draws a picture on a canvas corresponds to the canvas id.
}
我坚持将所有图片绘制为PDF。我正在使用jsPDF库生成PDF。我有:
var pdf = new jsPDF();
pdf.fromHTML(pictureModelHtml);
pdf.save("myfile.pdf");
pdf文件未显示任何图片。它是空的。我错过了什么??有人知道如何执行此操作吗?请帮忙!!
最佳答案
我认为这段代码将对您有所帮助。
您可以检查工作提琴here
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript">
var pictureModelHtml = '';
$().ready(function () {
var imgData;
html2canvas($("#scream"), {
useCORS: true,
logging: true,
onrendered: function (canvas) {
imgData = canvas.toDataURL('image/png');
imgData.crossOrigin = "Anonymous";
var doc = new jsPDF('p', 'pt', 'a4');
doc.addImage(imgData, 'PNG', 10, 10);
$('#scream1').attr('src', imgData);
for (i = 0; i < 10; i++) {
pictureModelHtml += '<canvas id="canvas-' + i + '">picutre</canvas>';
$('#someHtml').html(pictureModelHtml);
}
setTimeout(function () {
$('canvas').each(function (i, canvas) {
var c = $(canvas)[0];
var ctx = c.getContext("2d");
var img = document.getElementById("scream1");
ctx.drawImage(img, 10, 10);
});
}, 1000);
}
});
});
var testDivElement = document.getElementById('someHtml');
function savePDF(canvas) {
var imgData;
html2canvas($("#someHtml"), {
useCORS: true,
logging: true,
onrendered: function (canvas) {
imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'pt', 'a4');
doc.addImage(imgData, 'PNG', 10, 10);
//doc.save('sample-file.pdf');
setTimeout(function () { window.open(imgData) }, 1000);
}
});
}
</script>
</head>
<body>
<img id="scream" width="220" height="277" src="http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg" />
<img id="scream1" style="display:none;" />
<div id="someHtml"></div>
<br />
<button id="savePDFbutton" onclick="savePDF()">
save pdf
</button>
</body>
</html>