How to download a png canvas image as PDF JQuery

Question

I wrote this code many times ago, to download an image as png. Now I need that the image is downloaded as pdf and I don't know how to do this implementation without changing too much the structure of my code. Can anybody do me this favour? Thank you very much.

My JQuery:

function genScreenshot() {
                html2canvas(document.getElementById('boxes'), {
                    onrendered: function(canvas) {
                        $('#container').html("");
                        $('#container').append(canvas);

                        if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                            navigator.userAgent.match(/Trident.*rv\:11\./)) 
                        {
                            var blob = canvas.msToBlob();
                            window.navigator.msSaveBlob(blob,'yuppy.png');
                        }
                        else {
                            $('#test').attr('href', canvas.toDataURL("image/png"));
                            $('#test').attr('download','yuppy.png');
                            $('#test')[0].click();
                        }
                    }
                });
            }

Example of code to implement:

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

@siam I'm asking for help on how to do it on my code, so please help me if you can... — Niccolò Guidi, Feb 05 '17 at 22:03

score 2 · Answer 1 · edited May 23 '17 at 10:29

You can adapt this answer to your code, using jsPDF:

JS

$('#test').click(genScreenshot);

function genScreenshot() {
    html2canvas(document.getElementById('boxes'), {
        onrendered: function(canvas) {
            $('#container').html("");
            $('#container').append(canvas);

            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var pdf = new jsPDF();

            pdf.addImage(imgData, 'JPEG', 0, 0);

            pdf.save('screenshot.pdf');
        }
    });
}

CSS

#boxes {
  background: #fff; /* To avoid a black background in PDF */
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

<div id="boxes">
  <h1>This is some content for the screenshot</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae asperiores est autem corporis natus nesciunt veritatis, ullam inventore distinctio, quisquam nam quis temporibus vero, fugiat tempore officia. Laborum, harum, alias.</p>
</div>

<button id="test">Download as PDF</button>

<div id="container"></div>

Note: I only tested this in Chrome, Edge and Firefox on Windows 10. You might want to try other browsers/systems.

score 1 · Answer 2 · answered Feb 05 '17 at 22:42

You could use dom-to-image instead of html2canvas. From my experience the image quality and utf8 support is much better than html2canvas.

The code using jsPDF to then convert the image to PDF would be something like:

domtoimage.toPng(
    document.querySelector("canvasElement"), 
    { width: 800, height: 1000, quality: 1}
    )
    .then(function(dataUrl) {
        var doc = new jsPDF();
        var img = new Image();
        img.src = dataUrl;
        img.onload = function() {
            doc.addImage(img, 'PNG', 10, 15);
            doc.save('filename.pdf');
         };
     })
     .catch(function (error) {
          console.error('oops, something went wrong!', error);
     });

How to download a png canvas image as PDF JQuery

2 Answers2

Linked