HTML5 画布转 PDF

本文介绍了HTML5 画布转 PDF的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I am working in HTML5 and using canvas as a designing tool. However, I want to save my canvas in a jpeg file with a default of image/png and I want to show the preview of my canvas in a PDF.

推荐答案

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

A good approach is to use a combination of jspdf.js and 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:jsfiddle/p4s5k59s/1222/

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

Tested in Google Chrome 38, IE11 and Firefox 34. For Safari you might need to change the image format from PNG to JPEG.