將 Canvas 內容導出為 PDF

Question

我正在使用 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();
    }

}

Answer 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');
    }; 
});

Answer 2

看看這個鏈接：

• http://www.codeproject.com/Questions/385045/export-html5-webpage-including-canvas-to-pdf
• http://badassjs.com/post/708922912/pdf-js-create-pdfs-in-javascript

很可能它會做你需要的工作

Answer 3

這個 jspdf 僅用於在瀏覽器中保存文件，但我們不能使用生成的 PDF 發送到服務器