jsPDF multi page PDF with HTML renderrer

[panchotiya]

Hi
I have html page which contain more than one page data and if i generate pdf than it will display only one page pdf please help me for that.
My code is
function demoFromHTML(element) {
var pdf = new jsPDF('p','in','letter')
, source = $(element)[0]
, specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
pdf.fromHTML(
source // HTML string or DOM elem ref.
, 0.5 // x coord
, 0.5 // y coord
, {
'width':7.5 // max width of content on PDF
, 'elementHandlers': specialElementHandlers
}
)
//pdf.addPage();
pdf.output('dataurl')
}

[jonahbron]

👍 I'm having this issue as well.

[MrRio]

You can now add:

<!-- ADD_PAGE -->

To your HTML. Use the latest master branch.

[kamuran21]

MrRio, your suggestion does not work. Is there another way?

[Dijot]

kamuran21, did you find any issue for the pb ?

[kamuran21]

@Dijot no, unfortunately

[santoo25]

I'm having the similer issue, Can any one have the solution for this

[ipsjolly]

Found a solution !!!! then posted here :D http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/

[archervallesfin]

Found solution for this issue, its a long shot of debugging and testing but so far I found the line that causing the issue of why only 1 page is generated and the rest are empty.

You need to modify the recent version (as of Dec. 2017) jspdf.min.js itself
Look for this code inside the minimized version: this.pdf.internal.getVerticalCoordinateString(this.y),e.color,"Td")
then changed it to (just removing the e.color)
this.pdf.internal.getVerticalCoordinateString(this.y),"","Td")

Let me know if this solve your issue.

[bjesua]

@archervallesfin man!!!, your solutions works perfect!, thank you!!!

[veolys-nanne]

I made a perfectible plugin to generate mutli pdf pages from html with css without cutting html elements at the bottom of the pages. It needs html2canvas. Perfectible because 1) I'm not fluent in jquery plugin syntax, 2) the plugin works only if atomic elements are smaller than a page, 3) plugin will work with "grid" pages

(function( $ ){
    var methods = {
        init : function(params) {
            var marginLeft = params.marginLeft || 10;
            var marginTop = params.marginTop || 10;
            var pageWidth = params.pageWidth || 190;
            var pageHeight = params.pageHeight || 277;
            var fileName = params.fileName || 'file';
            var attribute = 'data-' + (params.attribute || 'page');
            var $target = $(this);
            var offset = $target.offset();
            var doc = new jsPDF('p', 'mm');

            html2canvas($target).then(function (canvas) {
                var imgWidth = canvas.width;
                var ratio = pageWidth / imgWidth;
                var nbrImage = -1;
                var pageRank = 0;
                var founded = true;
                while(founded) {
                    founded = false;
                    var lastCalculatedElement = $('[' + attribute + '="' + (pageRank - 1) + '"]:last', $target);
                    var top = lastCalculatedElement.length ? lastCalculatedElement.offset().top + lastCalculatedElement.outerHeight() : offset.top;
                    var maxBottom = offset.top + $target.outerHeight();
                    $('.pdf-end-page', $target).not('[' + attribute + ']').each(function () {
                        maxBottom = Math.min(ratio * ($(this).offset().top + $(this).outerHeight() - top), maxBottom);
                    });
                    $('*', $target).not('[' + attribute + ']').each(function () {
                        if ($(this).parents('.pdf-integrity').length == 0) {
                            var bottom = ratio * ($(this).offset().top + $(this).outerHeight() - top);
                            if (bottom <= maxBottom && (bottom - bottom % pageHeight) / pageHeight == 0) {
                                founded = true;
                                nbrImage = Math.max(nbrImage, pageRank + 1);
                                $(this).attr(attribute, pageRank);
                            }
                        }
                    });
                    pageRank++;
                }
                $target.trigger('nbrTotalPage', nbrImage);
                $('[data-page]', $target).parents('[data-page]').removeAttr('data-page');
                (function timeOutForTrigger (i) {
                    setTimeout(function () {
                        var top = $('[' + attribute + '="' + i + '"]:first', $target).offset().top - offset.top;
                        var imgHeight = $target.outerHeight() - top;
                        if ($('[' + attribute + '="' + (i + 1) + '"]:first', $target).length) {
                            imgHeight = $('[' + attribute + '="' + (i + 1) + '"]:first', $target).offset().top - offset.top - top;
                        }
                        var destinationCanvas = document.createElement('canvas');
                        destinationCanvas.width  = imgWidth;
                        destinationCanvas.height = imgHeight;
                        var destCtx = destinationCanvas.getContext('2d');
                        destCtx.drawImage(canvas, 0, top, imgWidth, imgHeight, 0, 0, imgWidth, imgHeight);
                        var imgData = destinationCanvas.toDataURL("image/png");
                        if (i > 0) doc.addPage();
                        doc.addImage(imgData, 'PNG', marginLeft, marginTop, imgWidth * ratio, imgHeight * ratio);
                        $target.trigger('endedPage', [i, nbrImage]);
                        if (++i < nbrImage) timeOutForTrigger(i)
                        else {
                            doc.save(fileName + '.pdf');
                            $target.trigger('endedGeneration');
                        }
                    }, 5)
                })(0);
            });

            return this;
        },
    };

    $.fn.html2PdfPages = function(methodOrOptions) {
        var currentArguments = arguments;
        var result = [];
        this.each(function() {
            if ( methods[methodOrOptions] ) {
                result.push(methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( currentArguments, 1 )));
            } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
                result.push(methods.init.apply( this, currentArguments ));
            } else {
                $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.slot' );
            }
        });

        return this.length == 1 && result.length == 1 ? result[0] : result;
    };
})( jQuery );

usage:

$('.my-multi-pdf-dom-element').html2PdfPages({
    marginLeft: 10, //optional (default: 10), margin left of pdf in mm
    marginTop: 10, //optional (default: 10), margin top of pdf in mm
    pageWidth: 190, //optional (default: 190), width of pdf in mm
    pageHeight: 277, //optional (default: 277), height of pdf in mm
    fileName: 'file', //optional (default: 'file), filename of the pdf,
    attribute: 'page', //optional (default: 'page), data attribute used for calculation, could be overriden to avoid conflict,
});

Three events are fired :

• nbrTotalPage with the number of pages in the final pdf
• endedPage with the rank of the currently drawed page
• endedGeneration when the pdf is saved.

classes with particular behaviors :

• pdf-integrity will avoid element to get children on different pages (unbreakable block).
• pdf-end-page will force a new page

@MrRio