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

jspdf add image/png
jspdf image from url
jspdf multiple pages
jspdf add multiple images
jspdf html to pdf with image
jspdf addhtml multiple pages
html2canvas multiple pages
html to pdf javascript with images

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.

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

        });
    });

How to Add Multiple Image to PDF Using JSPDF Javascript Code, This is a basic how-totutorial on adding single or multiple images to pdf using to add a new page to pdf, addpage is used.3) output: output will generate the pdf​  Here, we need to first convert the image into image data and then initialize the JSPDF framework. (Javascript PDF) is the client side solution for generating PDFs. JSPDF is helpful for event ticket, reports and certificated. In order to use JSPDF you need to include its library. So,

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

How to display an image in two pages in PDF using jsPDF?, 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​  Here we have used a single generatePDF() method having html2canvas called three times to convert three sections of a single HTML page into three pages of PDF file. html2canvas function will create a canvas and add it as Image in PDF page. Using the addPage() function we are setting the height and width of the new PDF page. We can adjust it dynamically or as per application requirements.

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

jsPDF addImage putting same image through entire file · Issue #998 , Steps to reproduce Hello i'm using a mix between jsPDF and HTML2Canvas, i use converted to canvas i use a For Loop to add them to my new PDF document. In this array i have all the id's of the divs i want to print in my html where the loop is ex: ("Page one shows: 1", "Page two shows: 2", etc). We can put the different type of elements in PDF from HTML like an icon, images, text, CSS styles. Here we will discuss an example of jsPDF to convert long HTML page into PDF document which will be generated client-side and download. Let’s start… Step 1) Include jsPDF and html2canvas liberary URl in head section of your HTML.

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).

Image in PDF cut off: How to make a canvas fit entirely in a PDF , When placing the canvas in the PDF using the jspdf library makes the image I want to display that single canvas image in two different pages. radio round symbol is missing while getting html page into pdf using jspdf How to split word file into multiple pdf files using C# How to apply digital signature to PDF with multiple pages in ASP.NET wit C#?

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



    }
 });
};

How to Create Multipage PDF from HTML Using jsPDF and , Step 2 – As we have a long HTML page to get converted into multiple PDF html2canvas function will create a canvas and add it as Image in PDF page. and iFrame if we want to show PDF created in and in page iFrame. When the Update preview or the Download buttons are clicked, the PDF is generated using jsPDF and passed to the iframe as a data URI string or saved to disk, as in the above example.

Save web pages and online images as a PDF attachment with one , We all know how to print or save a web page as a PDF from a browser. Another usage of JsPDF is to save multiple photos/images with various sizes and  I am currently using PHP 3rd party libraries called TCPDF + FPDI to accomplish this, and gave up on the JS way. I can take an existing (incredibly complex engineering drawing) PDF file page as a template, add text/images to that template, and display the resulting page as PDF, and add more pages to it as needed, by using those libraries.

[Solved] How to split pdf into multiple pages in jspdf, Hi. For solve this problem, I suggestion that you using the function "fromHTML". Below there are a code in javascript for print html page. Using jsPDF in Django templates to export as PDF. jsPDF is used to generate pdf files in client-side Javascript. You can find the links for jsPDF here and also you can find the link to project homepage. You've to include the scripting files/links in head section to work properly.

Jspdf add html multiple divs, Convert HTML/CSS Content to a Sleek Multiple Page PDF File Read about integrating jsPDF into This is a basic how-totutorial on adding single or multiple images to pdf using jspdf But now I have multiple DIVs to print in a single PDF. How to add multiple pages in jspdf | jspdf tutorial | html to pdf subscribe the channel https://www.youtube.com/channel/UCR6d check out facebook page

Comments
  • Any progress on that problem? Have a similar one, and planning cut the image into pieces using canvas, and then put it onto separate pages.
  • Instead of slice the image after creation,divide ur html into more than one div and convert to images and put one by one.This is what I am doing as an alternate.
  • The second page is black when I apply this transformation.
  • It is behaving the same as user3687972's solution: black end part added in the end and only part of document printed. The solution from @moknisofien worked as a charm.
  • The above solution adds a blank page to the end of document. I have edited the code in order to remove it. Instead of the 2 lines that calculate the $count variable ($count = Math.ceil($h) / Math.ceil($maxh); and $count = Math.ceil($count);), I have used the following: $count = Math.ceil($h / $maxh) - 1;
  • You should give some explanation on your answer
  • pdf.addPage(); this method is used to add new page in jsPDF.