3

jsPDFを使用して JavaScript で 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>
4

3 に答える 3

6

私も同様の問題を抱えていましたが、これが解決方法です。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);
于 2013-02-06T13:08:19.527 に答える
1

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);
于 2017-01-10T13:39:29.203 に答える