将画布内容导出为 PDF答案

【问题标题】：Export Canvas content to PDF将画布内容导出为 PDF
【发布时间】：2012-11-02 19:17:50
【问题描述】：

我正在使用 HTML5 Canvas 做一些事情。一切都很好，除了现在，我可以使用 Canvas2image 将画布内容导出为 PNG。但我想将其导出为 PDF。我做了一些研究，我很确定这是可能的......但我似乎无法理解我需要在我的代码中进行哪些更改才能使其正常工作。我读过一个名为 pdf.js 的插件......但我不知道如何在我的代码中实现它。

第一部分：

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();
    }

然后 JS 保存图像：

    document.getElementById("convertpngbtn").onclick = function() {
        convertCanvas("PNG");
    }

    document.getElementById("resetbtn").onclick = function() {
        var oImg = document.getElementById("canvasimage");
        oImg.parentNode.replaceChild(oCanvas, oImg);

        hideDownloadText();
    }

}

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您需要为此使用 2 个插件： 1)jsPDF 2)canvas-toBlob.js

然后添加这段代码生成轻量级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');
    }; 
});

【讨论】：

或者，但在同一主题中：如果您在 jsPDF 的 dist 文件夹中使用 jspdf.min.js，您可以将 canvas.toDataURL() 发送到 pdf.addImage，这样您就不用'不直接需要canvas-toBlob.js。

【解决方案2】：

看看这个链接：

它很可能会完成您需要的工作

【讨论】：

第一个链接看起来很有趣。问题是它似乎没有保存画布内容。 Canvas 一开始什么都没有。只有在页面加载后它才会绘制背景，但起初它是空白的。所以它保存了一个空白画布的PDF。而对于第二个链接，它只保存文本和链接，而不是图像......（如果我理解正确的话）。不过谢谢！

【解决方案3】：

这个 jspdf 只在浏览器中保存文件时有用，但我们不能使用生成的 PDF 发送到服务器

【讨论】：