HTML5 canvas to PDF

HTML5 canvas to PDF

本文关键字：PDF to canvas HTML5      更新时间：2023-09-26

我正在使用HTML5并使用canvas作为设计工具。但是，我想将画布保存在默认为 image/png 的 jpeg 文件中，并且我想在 PDF 中显示画布的预览。

一个好的方法是使用 jspdf.js 和 html2canvas 的组合。

<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： http://jsfiddle.net/p4s5k59s/1222/

在Google Chrome 38，IE11和Firefox 34中测试。
对于 Safari，您可能需要将图像格式从 PNG 更改为 JPEG。

相关文章：