本文介绍了HTML5 canvas,使用jspdf.js将canvas转换为PDF的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在JavaScript中将HTML5 canvas转换为PDF,但我得到一个黑色的背景PDF。我试图改变背景颜色,但仍然得到黑色。下面是我尝试的代码:
I am trying to convert HTML5 canvas to PDF in JavaScript but I get a black background PDF. I tried to change the background color but still get black. The following is code I am trying:
Canvas = document.getElementById("chart");
Context = Canvas.getContext("2d");
var imgData = Canvas.toDataURL('image/jpeg');
var pdf = new jsPDF('landscape');
pdf.addImage(imgData, 'JPEG', 0, 0, 1350, 750);
pdf.save('download.pdf');
如果你有任何想法,我非常感谢。
If you have any idea, I'd appreciate it very much.
推荐答案
一个好方法是使用jspdf.js和html2canvas的组合。我已为你做了一个jsfiddle。
A good approach is to use combination of jspdf.js and html2canvas. I have made a jsfiddle for you.
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
'
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
jsfiddle:
jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/
这篇关于HTML5 canvas,使用jspdf.js将canvas转换为PDF的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!