javascript jsPDF 损坏的 PDF？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14431894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsPDF Corrupt PDFs?
提问by 0xhughes
I am trying to create a PDF file with JavaScript using jsPDF. I have a little test page. Basically I have a download PDF button that takes the base64 image from a span and uses that for the imgData. I then try to addImagethat image data to the pdf and then save it. Everything seems to work, it generates the PDF and prompts for download. However when I try to look at the PDF with xpdf or Foxit reader I am told the PDF is corrupted. Am I creating this PDF incorrectly?My web page is pretty long, so I put it on Pastebin.
我正在尝试使用jsPDF使用 JavaScript 创建 PDF 文件。我有一个小测试页。基本上我有一个下载 PDF 按钮，它从一个跨度中获取 base64 图像并将其用于imgData. 然后我尝试addImage将该图像数据转换为 pdf，然后将其保存。一切似乎都正常，它会生成 PDF 并提示下载。但是，当我尝试使用 xpdf 或 Foxit 阅读器查看 PDF 时，我被告知 PDF 已损坏。我是否错误地创建了此 PDF？我的网页很长，所以我把它放在Pastebin 上。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../jspdf.js"></script>
<script type="text/javascript" src="../libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="../libs/BlobBuilder.js/BlobBuilder.js"></script>
<script type="text/javascript" src="../jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="../jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<title>Sup!</title>
<script>
function changeCan() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,128,128);
}
function changeCan3() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,128,128);
var image = new Image();
image.src = document.getElementById("3span").innerHTML;
ctx.drawImage(image,0,0);
}
function changeCan4() {
var imgData = document.getElementById("3span").innerHTML;
window.alert(imgData.length);
var doc = new jsPDF();
doc.addImage(imgData, 'JPEG', 15, 40, 128, 128);
doc.save('Test.pdf');
}
</script>
</head>
<body>
Yo!<hr>
<canvas id="myCanvas" width="128" height="128"></canvas><hr>
<button type="button" onClick="changeCan()">Change Me To Red!</button>
<button type="button" onClick="changeCan3()">Change Me To Span!</button>
<button type="button" onClick="changeCan4()">Download Me!</button>
<hr>
<span id="3span" style="display:none;">B64 DATA HERE</span>
</body>
</html>
回答by mtasic85
I had similar problem, and this is how is solved it. I used Blob.js, canvas-toBlob, FileSaver. I also noticed that latest BlobBuilder.min.js is not working correcly, so I used BlobBuilder.js instead.
我有类似的问题，这就是解决它的方法。我使用了Blob.js、canvas-toBlob、FileSaver。我还注意到最新的 BlobBuilder.min.js 不能正常工作，所以我改用 BlobBuilder.js。
var content = canvas.toDataURL('image/jpeg');
var doc = new jsPDF('landscape');
doc.addImage(content, 'JPEG', 0, 0);
var data = doc.output();
var buffer = new ArrayBuffer(data.length);
var array = new Uint8Array(buffer);
for (var i = 0; i < data.length; i++) {
array[i] = data.charCodeAt(i);
}
var blob = new Blob(
[array],
{type: 'application/pdf', encoding: 'raw'}
);
saveAs(blob, filename);
回答by v.nivuahc
I had a similar problem using pngimage type : PDF was corrupted when opened with Adobe Reader.
我在使用png图像类型时遇到了类似的问题：使用 Adobe Reader 打开时 PDF 已损坏。
Changing it to jpegresolved it !
将其更改为jpeg解决了它！
// Before : Corrupted PDF file when opened with Adobe Reader
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'png', 0, 0, 210, 295);
// After : Working
var imgData = canvas.toDataURL('image/jpeg');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'jpeg', 0, 0, 210, 295);
回答by XChoopa
I used the 1.3.4 version of jsPDF and it worked
我使用了 1.3.4 版本的 jsPDF 并且它有效
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
