javascript 将 Canvas 内容导出为 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13201679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Export Canvas content to PDF
提问by larin555
I am working on something using HTML5 Canvas. It's all working great, except right now, I can export the canvas content to PNG using Canvas2image. But I would like to export it to PDF. I've made some research and I'm pretty sure it's possible...but I can't seem to understand what I need to change in my code to make it work. I've read about a plugin called pdf.js...but I can't figure out how to implent it in my code.
我正在使用 HTML5 Canvas 做一些事情。一切都很好，除了现在，我可以使用 Canvas2image 将画布内容导出为 PNG。但我想将其导出为 PDF。我做了一些研究，我很确定这是可能的……但我似乎无法理解我需要在代码中更改什么才能使其工作。我读过一个名为 pdf.js 的插件......但我不知道如何在我的代码中实现它。
First part :
第一部分 ：
function showDownloadText() {
document.getElementById("buttoncontainer").style.display = "none";
document.getElementById("textdownload").style.display = "block";
}
function hideDownloadText() {
document.getElementById("buttoncontainer").style.display = "block";
document.getElementById("textdownload").style.display = "none";
}
function convertCanvas(strType) {
if (strType == "PNG")
var oImg = Canvas2Image.saveAsPNG(oCanvas, true);
if (strType == "BMP")
var oImg = Canvas2Image.saveAsBMP(oCanvas, true);
if (strType == "JPEG")
var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);
if (!oImg) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
oImg.id = "canvasimage";
oImg.style.border = oCanvas.style.border;
oCanvas.parentNode.replaceChild(oImg, oCanvas);
showDownloadText();
}
And the JS to that saves the image :
和保存图像的 JS ：
document.getElementById("convertpngbtn").onclick = function() {
convertCanvas("PNG");
}
document.getElementById("resetbtn").onclick = function() {
var oImg = document.getElementById("canvasimage");
oImg.parentNode.replaceChild(oCanvas, oImg);
hideDownloadText();
}
}
回答by Temp O'rary
You need to use 2 plugins for this: 1) jsPDF2) canvas-toBlob.js
您需要为此使用 2 个插件：1) jsPDF2) canvas-toBlob.js
Then add this piece of code to generate light weight PDF:
然后添加这段代码来生成轻量级的PDF：
canvas.toBlob(function (blob) {
var url = window.URL || window.webkitURL;
var imgSrc = url.createObjectURL(blob);
var img = new Image();
img.src = imgSrc;
img.onload = function () {
var pdf = new jsPDF('p', 'px', [img.height, img.width]);
pdf.addImage(img, 0, 0, img.width, img.height);
pdf.save(fileName + '.pdf');
};
});
回答by Salvador Dali
Look at this links:
看看这个链接：
- http://www.codeproject.com/Questions/385045/export-html5-webpage-including-canvas-to-pdf
- http://badassjs.com/post/708922912/pdf-js-create-pdfs-in-javascript
- http://www.codeproject.com/Questions/385045/export-html5-webpage-include-canvas-to-pdf
- http://badassjs.com/post/708922912/pdf-js-create-pdfs-in-javascript
Most probably it will do the work you need
很可能它会做你需要的工作
