javascript - Create multiple page PDF document jsPDF - Stack Overflow

admin管理员组

文章数量:1319009

For quite some time i am trying to create a multiple page PDF with jsPDF.

I have an HTML document with several DIV's

<div id="pdfContainer">
    <div id="page1">Content page 1</div>
    <div id="page2">Content page 2</div>
    <div id="page3">Content page 3</div>
    <div id="page4">Content page 4</div>
</div>

I tried it with html2canvas but prefer html2pdf (i have html2pdf.js included).

 var doc = new jsPDF();
    var elementHandler = {
        '#page1': function (element, renderer) {
            return true;
        },
        '#page2': function (element, renderer) {
            return true;
        },
        '#page3': function (element, renderer) {
            return true;
        },
        '#page4': function (element, renderer) {
            return true;
        }
    };
    var source = window.document.getElementById("pdfcontainer");
    doc.fromHTML($('#pdfcontainer').get(0), 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
    });
    doc.output('dataurlnewwindow', {});
}

The code above is my last try, but results in an empty PDF.

I also used

var html = $('#page1').html();
    html2pdf(html, pdf, function(pdf) {
        pdf.output('dataurlnewwindow');
    });

Which is working, but only for page 1

Is there an easy way to make this work? Or do i have to make the PDF page by page

For quite some time i am trying to create a multiple page PDF with jsPDF.

I have an HTML document with several DIV's

<div id="pdfContainer">
    <div id="page1">Content page 1</div>
    <div id="page2">Content page 2</div>
    <div id="page3">Content page 3</div>
    <div id="page4">Content page 4</div>
</div>

I tried it with html2canvas but prefer html2pdf (i have html2pdf.js included).

 var doc = new jsPDF();
    var elementHandler = {
        '#page1': function (element, renderer) {
            return true;
        },
        '#page2': function (element, renderer) {
            return true;
        },
        '#page3': function (element, renderer) {
            return true;
        },
        '#page4': function (element, renderer) {
            return true;
        }
    };
    var source = window.document.getElementById("pdfcontainer");
    doc.fromHTML($('#pdfcontainer').get(0), 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
    });
    doc.output('dataurlnewwindow', {});
}

The code above is my last try, but results in an empty PDF.

I also used

var html = $('#page1').html();
    html2pdf(html, pdf, function(pdf) {
        pdf.output('dataurlnewwindow');
    });

Which is working, but only for page 1

Is there an easy way to make this work? Or do i have to make the PDF page by page

• javascript
• jspdf
• html2pdf

Share Improve this question Follow edited Sep 10, 2017 at 16:05 Hash 4,71555 gold badges2222 silver badges4040 bronze badges asked Feb 15, 2017 at 13:10 user1664803user1664803 29311 gold badge77 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

A simple example using html2pdf plugin:

<script>
    var source = window.document.getElementById("report");

    var pdf = new jsPDF('p', 'pt', 'a4');
    var canvas = pdf.canvas;
    canvas.height = 72 * 11;
    canvas.width = 72 * 8.5;
    //page break
    pdf.context2d.pageWrapYEnabled = true;

    html2pdf(source, pdf, function (pdf) {
                var iframe = document.createElement('iframe');
                iframe.setAttribute('style', 'position:fixed;right:0; top:0; bottom:0; height:100%; width:100%');
                document.body.appendChild(iframe);
                iframe.src = pdf.output('datauristring');
            }
    );
</script>

We can create PDF of multiple pages, but create partitions of pages in HTML separated by class

Then we can bine both jsPDF and html2canvas as follow

    var pdf = new jsPDF('p', 'pt', [580, 630]);

    html2canvas($(".page1")[0], {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
            var ctx = canvas.getContext('2d');
            var imgData = canvas.toDataURL("image/png", 1.0);
            var width = canvas.width;
            var height = canvas.clientHeight;
            pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));

        }
    });
    html2canvas($(".page2")[0], {
        allowTaint: true,
        onrendered: function(canvas) {
            var ctx = canvas.getContext('2d');
            var imgData = canvas.toDataURL("image/png", 1.0);
            var htmlH = $(".page2").height() + 100;
            var width = canvas.width;
            var height = canvas.clientHeight;
            pdf.addPage(580, htmlH);
            pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
        }
    });
    html2canvas($(".page3")[0], {
        allowTaint: true,
        onrendered: function(canvas) {
            var ctx = canvas.getContext('2d');
            var imgData = canvas.toDataURL("image/png", 1.0);
            var htmlH = $(".page2").height() + 100;
            var width = canvas.width;
            var height = canvas.clientHeight;
            pdf.addPage(580, htmlH);
            pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
        }
    });
    setTimeout(function() {

        //jsPDF code to save file
        pdf.save('sample.pdf');
    }, 0);

plete tutorial is given here http://freakyjolly./create-multipage-html-pdf-jspdf-html2canvas/

本文标签： javascriptCreate multiple page PDF document jsPDFStack Overflow