How to save a image in multiple pages of pdf using jspdf

Question

I have a table(columns aligned differently) which is to be saved as pdf.I converted the table to image using html2canvas and then saved the image into pdf usng jspdf. It works well if the size of the image is less than or equal to page size of pdf but if the image size is bigger than the page size then it saves only first page of pdf(which has only a part of the image) and rest of the image is not displayed/saved in pdf. here the javascript code I used.

       $("#btnVC_saveGLSummary").click(function () {
        html2canvas($("#tblSaveAsPdf1"), {
        onrendered: function (canvas) {
        var myImage = canvas.toDataURL("image/jpeg");            
        var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
        filename = 'report_' + d + '.pdf';
        var doc = new jsPDF();
        doc.addImage(myImage, 'JPEG', 12, 10);
        doc.save(filename);
          }
         });
       });

Any ideas how to get the remaining part of the image on the second page of pdf.

Solution 1

It works for html2canvas and jspdf.

var imgData = canvas.toDataURL('image/png');
var imgWidth = 210; 
var pageHeight = 295;  
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 10; // give some top padding to first page

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
  position += heightLeft - imgHeight; // top padding for other pages
  doc.addPage();
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
}
doc.save( 'file.pdf');

Solution 2

I use this method

function makePDF(){
var quotes = document.getElementById('container-fluid');
html2canvas(quotes, {
    onrendered: function(canvas) {
    //! MAKE YOUR PDF
    var pdf = new jsPDF('p', 'pt', 'a4');

    for (var i = 0; i <= quotes.clientHeight/980; i++) {
        //! This is all just html2canvas stuff
        var srcImg  = canvas;
        var sX      = 0;
        var sY      = 1120*i; // start 980 pixels down for every new page
        var sWidth  = 778;
        var sHeight = 1120;
        var dX      = 0;
        var dY      = 0;
        var dWidth  = 778;
        var dHeight = 1120;

        window.onePageCanvas = document.createElement("canvas");
        onePageCanvas.setAttribute('width', 778);
        onePageCanvas.setAttribute('height', 1120);
        var ctx = onePageCanvas.getContext('2d');
        // details on this usage of this function: 
        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
        ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

        // document.body.appendChild(canvas);
        var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

        var width         = onePageCanvas.width;
        var height        = onePageCanvas.clientHeight;

        //! If we're on anything other than the first page,
        // add another page
        if (i > 0) {
            pdf.addPage(595, 842); //8.5" x 11" in pts (in*72)
        }
        //! now we declare that we're working on that page
        pdf.setPage(i+1);
        //! now we add content to that page!
        pdf.addImage(canvasDataURL, 'PNG', 0, 0, (width*.72), (height*.71));

    }
    //! after the for loop is finished running, we save the pdf.
    pdf.save('Test3.pdf');
  }
  });
  }

I hope it will be helpful

Inspired by another stack overflow response

Solution 3

This was answered further up in a similar way, but I felt I wanted to give an example leaving out unnecessary code:

You can easily run through all pages and put 'watermark' texts or other items on every page like this:

let pdf = new jspdf();
// do something that creates multiple pages
for (let pageNumber = 1; pageNumber <= pdf.getNumberOfPages(); pageNumber++) {
  pdf.setPage(pageNumber)
  pdf.addImage('myImgOnEveryPage.png', 10,10,20,20);
  pdf.text('My text on every page, 12, 12);
}

(JSPDF version 2.1.1)

Solution 4

You can easily do this by adding small tweak in your own code.

$("#btnVC_saveGLSummary").click(function () {
    html2canvas($("#tblSaveAsPdf1"), {
    onrendered: function (canvas) {
    var myImage = canvas.toDataURL("image/jpeg");            
    var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
    filename = 'report_' + d + '.pdf';
    var doc = new jsPDF();
    var totalPages = doc.internal.getNumberOfPages();
    for(let i = 1; i < totalPages; i++) {
        doc.setPage(i);
        doc.addImage(myImage, 'JPEG', 12, 10);
    }       
    doc.save(filename);
    }
  });
});

View more solutions

Comments

[Bharti Ladumor]

it is giving error : Property 'onePageCanvas' does not exist on type 'Window' and Cannot find name 'onePageCanvas'. and create pdf with blank content

[ben_weller]

@BhartiLadumor - If you're not using this in a regular browser context, the window object isn't available. Instead of window.onePageCanvas =, use var onePageCanvas = to declare it as a local variable in the scope of the loop

[ßiansor Å. Ålmerol]

Looks like it similar to real source stackoverflow.com/questions/19272933/…

[Jerther]

How does that demonstrate multiple pages?

[Furkat U.]

it works great thank you, one tiny issue add position += heightLeft - imgHeight; to make some top padding in next pages

[Lew Perren]

I think there is a error in the position calculation for the third and subsequent pages. The += in the assignment position += heightLeft - imgHeight means the pageHeight gets deducted twice. So instead of positions being 0, -295, -590 etc they become 0, -295, -885 etc. The solution is just to use the = assignment as position = heightLeft - imgHeight or replace the position calculation in the loop with: x= x+1;position = (pageHeightx)-1; I hope this helps someone.

[Manmeet Khurana]

how to set the pdf page size according to the image, after that image create new page and new image on new page

[NightTom]

Does this use html2canvas? Or does it not need it?

[Alba Hoo]

i think it meat to be position = heightLeft - imgHeight + 10 (the original padding on the first page will cause offset 10 for the following pages.)