Jspdf: html2canvas only showing viewport. not printing complete DIV

[adeel3612]

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]

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.

[adeel3612]

@lennu so there is not option to do this? if i use simple html to pdf conversion without using html2canvas then there is problem of autosplitting in which it stretched out the pdf and blurry pdf. Can you recomment what should i use other than the jspdf library to make the pdf? from which i can have multiple configuration.

[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

[eKoopmans]

Hi there! Yes, I've made html2pdf, which uses html2canvas + jsPDF to create PDFs from HTML. It should do what you want - feel free to open an issue over there if it gives you any trouble!

[adeel3612]

@eKoopmans sorry for the late reply. I want to try html2pdf is this library gives autobreak to div to be printed on new page? can you plz guide me that where i can see the examples.

[eKoopmans]

Hi @adeel3612, you can find a description for using page-breaks here. Right now, to add page-breaks you need to add an empty div with the html2pdf__page-break class attached. That div will be expanded to fill the rest of the page it's on, meaning that any content after it will appear on the next page.

In the future I plan to add a feature to specify page-breaks on existing elements, without having to add divs, but that's not available yet. If you need that sort of functionality, you could do something like:

var el = document.getElementById('element-after-page-break');
var pageBreak = document.createElement('div');
pageBreak.className = 'html2pdf__page-break';
el.parentElement.insertBefore(pageBreak, el);

[adeel3612]

@eKoopmans Thanks i am implementing this in my application. just a last thing i want to ask. When i used jspdf along with html2canvas i have a problem. It is kinda weird i am seeing this behaviour but on mac safari it gives totally black pdf and in the firefox of safari it changes the white spaces to the black and else div is print out in the pdf. Any help your library can provide me on this regard?

P.S : i really like this idea to add the page breaks and i can split the page where ever i want.

[eKoopmans]

Hi @adeel3612, I'll respond to your open issue eKoopmans/html2pdf#10, it looks like the same question you've asked here.

[adeel3612]

@eKoopmans Hi! actually that problem is solved now about the black screen in mac and auto but i got another thing which is not showing the graph i think i should close the question here because your library gives me all the answers.

[eKoopmans]

Great, sounds good!