Search code examples
javascriptjqueryhtmljspdfhtml2canvas

Transform canvas to image using toDataURL() and add to pdf


I implement:

<script type="application/javascript" src="js/html2canvas.js"></script>
<script type="application/javascript" src="js/jspdf.debug.js"></script>

Both are the latest versions. I have:

$(document).ready(function () {
        $('#down_but').click(function() {
            html2canvas(document.getElementById("node")).then(canvas => {
                const img = canvas.toDataURL("image/jpeg",1);
                const pdf = new jsPDF();
                pdf.addImage(img,"jpeg",5,5,205,292);
                pdf.save("file.pdf");

            });
        });
    });

When I just put some text and no addImage to pdf, pdf opens and download. But when i use canvas toDataurl nothing happend. I really don't know why. I try copy and paste code from another questions but none of them works for me. When I click on download button with id="down_but" it just give error in dev console.

See console error image

I try anything but nothing help. Please help me if someone know where is problem. I create JSFiddle for it too.


Solution

  • Add last version of html2canvas.js

    https://html2canvas.hertzen.com/dist/html2canvas.js
    

    JSfiddle