How to display an image in two pages in PDF using jsPDF?

Question

I have a html page. In which I have a button , whenerever I click this button it will convert the entire html page into data image using html2canvas and placed it into PDF using jsPDF library. The javascript which I am using is

$("#printButton").click(function(){
html2canvas([document.getElementById('form1')], {
        onrendered: function (canvas) {
            var imageData = canvas.toDataURL('image/jpeg',1.0); 
           var doc = new jsPDF('landscape');
           doc.addImage(imageData,'JPEG',5,20,200,150);
           doc.save('Test.pdf');
     }
    });
});

It is displaying the image in first page only. but whenever the html page size is more, I want to cut the image data and place it in two pages in PDF. Please help me to solve this.

Solution 1

This may not be the perfect answer but still works

                $("#btnSaveAsPDF").click(function () {
                html2canvas($("#tblSaveAsPdf_canvas"), {
                onrendered: function (canvas) {
                var imageData = canvas.toDataURL("image/jpeg");
                var image = new Image();
                image = Canvas2Image.convertToJPEG(canvas);
                var doc = new jsPDF();
                doc.addImage(imageData, 'JPEG', 12, 10);
                var croppingYPosition = 1095;
                count = (image.height) / 1095;

                for (var i =1; i < count; i++) {
                        doc.addPage();
                        var sourceX = 0;
                        var sourceY = croppingYPosition;
                        var sourceWidth = image.width;
                        var sourceHeight = 1095;
                        var destWidth = sourceWidth;
                        var destHeight = sourceHeight;
                        var destX = 0;
                        var destY = 0;
                        var canvas1 = document.createElement('canvas');
                        canvas1.setAttribute('height', destHeight);
                        canvas1.setAttribute('width', destWidth);                         
                        var ctx = canvas1.getContext("2d");
                        ctx.drawImage(image, sourceX, 
                                             sourceY,
                                             sourceWidth,
                                             sourceHeight, 
                                             destX, 
                                             destY, 
                                             destWidth, 
                                             destHeight);
                        var image2 = new Image();
                        image2 = Canvas2Image.convertToJPEG(canvas1);
                        image2Data = image2.src;
                        doc.addImage(image2Data, 'JPEG', 12, 10);
                        croppingYPosition += destHeight;              
                    }                  
                var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
                filename = 'report_' + d + '.pdf';
                doc.save(filename);
            }

        });
    });

Solution 2

html2canvas($('#wrap')[0]).then(canvas => {
        try {
            contentH = $('#wrap').height();
            var img = canvas.toDataURL("image/png", 1.0);
            $w = $actw = canvas.width;
            $h = $acth = canvas.height;
            var pdf = new jsPDF("p", "mm", "a4");
            var width = $maxw = pdf.internal.pageSize.width;
            var height = $maxh = pdf.internal.pageSize.height;
            if (!$maxw) $maxw = width;
            if (!$maxh) $maxh = height;
            if ($w > $maxw) {
                $w = $maxw;
                $h = Math.round($acth / $actw * $maxw);
            }
            pdf.addImage(img, 'JPEG', 0, 0, $w, $h);
            $count = Math.ceil($h) / Math.ceil($maxh);
            $count = Math.ceil($count);
            for (var i = 1; i <= $count; i++) {
                position = - $maxh * i
                alert(position);
                pdf.addPage(img, 'JPEG', 0, 0, $w, $h);
                pdf.addImage(img, 'JPEG', 0, position, $w, $h);
            }
            pdf.save("cart.pdf");
        } catch (e) {
            alert("Error description: " + e.message);
        }
    });

Solution 3

I've updated the code. Now works with multiple pages and more precise cuts without happen black background at the end of the cropped image.

Code

$('#pdf').on('click', function(){

    html2canvas(document.body, {
        onpreloaded: function(){
              $("#barra").hide(); 
        },
        onrendered: function(canvas) {
            $("#page").hide();
            var imgData = canvas.toDataURL('image/jpeg');              
            options = {
                orientation: "0",
                unit: "mm",
                format: "a4"
            };
            var doc = new jsPDF(options, '', '', '');
            doc.addImage(imgData, 'jpeg', 10, 10, 190, 0);
            var corte = 1620; // configura tamanho do corte
            var image = new Image();
            image = Canvas2Image.convertToJPEG(canvas);

            var croppingYPosition = corte;
            var count = (image.height)/corte;


            for (var i =1; i < count; i++) {
                    doc.addPage();
                    var sourceX = 0;
                    var sourceY = croppingYPosition;
                    var sourceWidth = image.width;
                    var sourceHeight = corte;
                    var destWidth = sourceWidth;
                    var destHeight = sourceHeight;
                    var destX = 0;
                    var destY = 0;
                    var canvas1 = canvas;
                    canvas1.setAttribute('height', (image.height)-(corte*i));
                    canvas1.setAttribute('width', destWidth);                         
                    var ctx = canvas1.getContext("2d");
                    ctx.drawImage(image, sourceX, 
                                         sourceY,
                                         sourceWidth,
                                         sourceHeight, 
                                         destX, 
                                         destY, 
                                         destWidth, 
                                         destHeight);
                    var image2 = new Image();
                    image2 = Canvas2Image.convertToJPEG(canvas1);
                    image2Data = image2.src;
                    doc.addImage(image2Data, 'JPEG', 10, 10, 190, 0);
                    croppingYPosition += destHeight;              
                }     


            doc.save('sample-file.pdf');
            $('canvas').remove();
            $('canvas1').remove();
            $("#page").show();
            $("#barra").show();
        }
    });
});

Solution 4

To put a long image on multiple pages I came out with something like this:

var img = new Image();
img.onload = function(){
    while (croppingYPosition < image.height) {
        var sourceX = 0;
        var sourceY = croppingYPosition;
        var sourceWidth = image.width;
        var sourceHeight = maxHeight;
        var leftToCropHeight = image.height - croppingYPosition;
        if (leftToCropHeight < maxHeight) {
            sourceHeight = leftToCropHeight;
        }
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = 0;
        var destY = 0;
        var canvas = document.createElement('canvas');
        canvas.setAttribute('height', destHeight);
        canvas.setAttribute('width', destWidth);
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 
                        sourceX,
                        sourceY,
                        sourceWidth,
                        sourceHeight,
                        destX,
                        destY,
                        destWidth,
                        destHeight);
        croppedImages.push(CanvasToJPEGConversionService.toJPEG(canvas));
        croppingYPosition += destHeight;
    }
    retur croppedImages;
};
img.src = image.dataURL;

I basically get an array of objects with dataURL (cropped images).

Solution 5

I Came out with this solution hope this will help you:

PDFConverter.prototype.exportToPDF = function (divID, filename, pdfHeight) {

html2canvas($('#' + divID), {                                       //Plugin:html2canvas.min.js,Takes html and convert to canvas.

    onrendered: function (canvas) {
        var doc = new jsPDF();                                    //Plugin:jspdf.min.js Using to export html to pdf file
        var HtmltoPdfPageHeight;
        if (pdfHeight)
            HtmltoPdfPageHeight = pdfHeight;
        var image = new Image();
        image = Canvas2Image.convertToJPEG(canvas);

        var croppingYPosition;
        var count = Math.ceil((image.height) / HtmltoPdfPageHeight);


        for (var i = 1; i <= count; i++) {

            if (i == 1) 
                croppingYPosition = 0;
            else 
                doc.addPage();


            var sourceX = 0;
            var sourceY = croppingYPosition;

            var croppingImageHeight = (image.height - (HtmltoPdfPageHeight * (i-1))) > HtmltoPdfPageHeight ? HtmltoPdfPageHeight : (image.height - (HtmltoPdfPageHeight * (i-1)));
            var destX = 0;
            var destY = 0;
            var croppedCanvas = document.createElement('canvas'); //Canvas using to resize main canvas
            croppedCanvas.setAttribute('height', croppingImageHeight);
            croppedCanvas.setAttribute('width', image.width);
            var ctx = croppedCanvas.getContext("2d");
            ctx.drawImage(image, sourceX,                                //drawImage(img, startX, startY, originalW, originalH, destX, destY, destW, destH);
                                 sourceY,
                                 image.width,
                                 HtmltoPdfPageHeight,
                                 destX,
                                 destY,
                                 image.width,
                                 HtmltoPdfPageHeight);
            var imageToAddatPdf = new Image(); //Final image exporting in pdf page
            imageToAddatPdf = Canvas2Image.convertToJPEG(croppedCanvas);
            doc.addImage(imageToAddatPdf.src, 'JPEG', 10, 10, 185, 0);
            croppingYPosition += HtmltoPdfPageHeight;
        }

        doc.save(filename + '.pdf');



    }
 });
};

View more solutions