html2canvas only showing viewport. not printing complete DIV

I m using html2canvas along with jsPDF to create a pdf. Unfortunately documentation of both is not enough and i am banging my head. I want to create a pdf having multipe div in a single huge DIV. what i mean, is i have many divs inside a div which i want to print.

Problem:

PDF is only generating the viewport screenshot. i want to ask if there is an possible solution?

this is my function call

`function generate_pdf(){ var quotes = document.getElementById(‘blank_summary_table’);

html2canvas(quotes, {
    onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

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

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            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(612, 791); //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', 20, 40, (width*.62), (height*.62));

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

}`

[lennu]

I haven’t really found a great solution to do webpage to pdf conversion on the frontend. The combination of jsPDF and html2canvas is a good one, if someone can get it working.

This eKoopmans, who has made the pull request to fix html2canvas is working on a solution that uses html2canvas and jspdf: https://github.com/eKoopmans/html2pdf

[lennu]

This is an error in html2canvas, and there is a pull request open to fix the problem on html2canvas repository: https://github.com/niklasvh/html2canvas/pull/1083

You can use the branch of the repository with npm: npm install --save git+https://github.com/eKoopmans/html2canvas.git#develop or just download it from the github page.