个人中心
gpt4 book ai didi

javascript - jsPDF 损坏的 PDF？

转载 作者：搜寻专家 更新时间：2023-10-31 23:08:03 25 4
gpt4 key购买 nike

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

最佳答案

我遇到了类似的问题，这就是解决方法。我用了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);

关于javascript - jsPDF 损坏的 PDF？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14431894/

25 4 0
文章推荐： html - 如何使图例扩展字段集的整个宽度并保持内容填充？
文章推荐： node.js - 如何在sequelize中获取一系列模型关联
文章推荐： ios - 从麦克风播放音频
文章推荐： node.js - 如何使用 axios 将图像(大文件)上传到服务器
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com