从html导出图像到jsPDF [英] Exporting images to jsPDF from html
本文介绍了从html导出图像到jsPDF的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网页，我希望打印一些HTML。
为此，我使用 html2canvas 和 jsPDF 。
我遇到的问题是它不会打印HTML中显示的图像。
我的HTML和css看起来如下（
实际PDF结果
解决方案
检查此工作代码。
你也可以查看小提琴上的代码。
<！DOCTYPE html> < html xmlns =http://www.w3.org/1999/xhtml> < HEAD> <标题>< /标题> < 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> <风格> .handsomeHtml {background：red; } .crazyFrog {background：url（'http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg'）;宽度：500px;身高：500px; }< / style> < /头> <身体GT; < div id =someHtmlclass =handsomeHtml>你好，英俊的HTML< br /> < img class =crazyFrog>< / img> < / DIV> < br /> < button id =savePDFbuttononclick =savePDF（）>保存pdf< / button> < /体> < / html>
I have a webpage on which I wish to print some HTML.
To do so, I use html2canvas and jsPDF.
The issue that I encounter is that it does not print the images shown in the HTML.
My HTML and css looks as follows (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>
Expected result:
Actual PDF result
解决方案
Check this working code.
You can check code on fiddle also.
<!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>
这篇关于从html导出图像到jsPDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
