jsPDF 损坏的 PDF？答案

【问题标题】：jsPDF Corrupt PDFs?jsPDF 损坏的 PDF？
【发布时间】：2013-01-04 02:37:47
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

在您的3span DIV 中，innerHTML 包含data:image/jpeg;base64,。它是必需的/必要的吗？只是一个想法，我不知道这个 jsPDF 库，但我很感兴趣，我很快就会需要这个 :)
好吧，data:image/jpeg;base64, 部分对于我正在玩弄的测试页面的不同部分似乎是必要的，即将画布更改为笑人图形。同样在 jsPDF 网页 jspdf.com 上，如果您愿意，带有猫图像的示例会显示 data:image/jpeg;base64,“标题”。 @JScoobyCed 所以我不完全确定是否需要它，我可以尝试快速删除它并生成另一个 PDF！
@JScoobyCed 我快速从 base64 数据中删除了那块信息，并且画布和 PDF 都出错了。我不太担心画布，那只是为了笑。虽然 PDF 不起作用，但这里是错误 FireBug 吐，getJpegSize could not find the size of the image [Break On This Error] throw new Error('getJpegSize could not find the size of the image'); 我查看了他库中的 .js 文件中的代码，但我无法确切知道它在做什么。抓取某些字符，获取长度并使用该信息进行一些数学运算。
我试过你的代码，它在 PDF 中生成的只是这个文本：[object Uint8Array]。所以我猜它没有损坏，但没有完全生成。无能为力，我需要先阅读有关 jsPDF 的信息，但现在不能这样做。祝你好运。
您好，感谢您的尝试！这可能是警报，用它来调试一下:) 祝你未来好运。

标签： javascript html pdf jspdf

【解决方案1】：

我有类似的问题，这是解决它的方法。我用过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);

【讨论】：

很简洁，下班后有空我会测试一下！但是有一个问题，一开始你从画布上抓取内容，在我的场景中，图片加载来自本地机器。（一个脚本生成网页和它的图像数据）。如果我已经在跨度中定义了 DataURL，我可以简单地去“ var content = getElementByID("SPANID").innerHtml ”吗？内部 html 是脚本生成的 toDataURL ASCII。感谢您的出色回答，我一定会研究您的方法，看看效果如何！
我正在测试您的解决方案，但我得到了一个像 name.pdf-1.part 这样的 pdf 文件有没有办法让我得到 name.pdf b>?
我还没有找到摆脱 .part 扩展名的方法。我认为我的 FireFox (12) 版本与 jsPDF 完全不兼容。我将我的 FireFox 升级到 18.0.2 版并且我的原始脚本可以正常工作，但它仍然具有 .part 扩展名。我不确定它为什么会这样。一定是图书馆那边的东西。不幸的是，我希望能够为我的网页提供一些跨浏览器兼容性。我可能不得不设置我的客户使用我猜的最新版本的 FireFox。在 jsPDF github 上提交了一些问题。也许我们会得到一个不错的更新！
@Jeff 另外，我想添加一些通用信息。如果您正在寻找生成 PDF 文件，我阅读了一个网站，其中有人仅使用他的文本编辑器手动构建了 PDF 文件。我还没有尝试过，但很有可能创建自己的小功能来在客户端创建一些 PDF，这取决于你的冒险精神和你的 PDF 的动态性。 mariomalwareanalysis.blogspot.com/2012/02/…我还没有测试过他的方法，但如果你想冒险的话，这可能是一个开始;)
.part 扩展名真的很时髦 :) 你在 FF 中使用任何扩展/插件下载吗？你可以在 Chrome 中测试它吗？您使用的是什么操作系统？

【解决方案2】：

我在使用 png 图像类型时遇到了类似的问题：使用 Adobe Reader 打开时 PDF 已损坏。

将其更改为 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);

【讨论】：

【解决方案3】：

我用的是 1.3.4 版本的 jsPDF，效果很好

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

【讨论】：