我有一个网页，我想在上面打印一些 HTML。
为此，我使用了 html2canvas 和 jsPDF。
我遇到的问题是它不打印 HTML 中显示的图像。
我的 HTML 和 css 如下所示 ( complete code in fiddle ):
.handsomeHtml {
background: red;
}
.crazyFrog {
background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg');
width: 500px;
height: 500px;
}
<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>
<div id="someHtml" class="handsomeHtml">
Hello, handsome HTML
<br>
<img class="crazyFrog"></img>
</div>
<button id="savePDFbutton" onclick="savePDF()">
save pdf
</button>
预期结果:
实际PDF结果
最佳答案
检查此工作代码。
您可以在 fiddle 上查看代码还有。
<!DOCTYPE html>
<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 testDivElement = document.getElementById('someHtml');
function savePDF() {
var imgData;
html2canvas($("#someHtml"), {
useCORS: 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');
window.open(imgData);
}
});
}
</script>
<style>
.handsomeHtml {
background: red;
}
.crazyFrog {
background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg');
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="someHtml" class="handsomeHtml">
Hello, handsome HTML
<br />
<img class="crazyFrog"></img>
</div>
<br />
<button id="savePDFbutton" onclick="savePDF()">
save pdf
</button>
</body>
</html>关于javascript - 将图像从 html 导出到 jsPDF，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45160074/