CODEWITHSUNDEEP
javascriptjqueryhtmlpdf
Niccolò Guidi
Niccolò Guidi

Reputation: 195

How to download a png canvas image as PDF JQuery

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

Upvotes: 1

Views: 9069

Answers (2)

Federico Giust
Federico Giust

Reputation: 1793

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

Upvotes: 1

blex
blex

Reputation: 25648

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.

Upvotes: 2

Related Questions