Создать многостраничный PDF-документ jsPDF

В течение некоторого времени я пытаюсь создать многостраничный PDF-файл с помощью jsPDF.

У меня есть HTML-документ с несколькими DIV

<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>

Я пробовал это с html2canvas, но предпочел html2pdf (у меня есть html2pdf.js).

 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', {});
}

Приведенный выше код — моя последняя попытка, но в результате получается пустой PDF-файл.

я также использовал

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

Который работает, но только для страницы 1

Есть ли простой способ сделать эту работу? Или мне нужно сделать PDF страницу за страницей


javascript jspdf html2pdf
person user1664803    schedule 15.02.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Простой пример с использованием плагина html2pdf:

<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>
person user2898310    schedule 12.04.2017
comment
Не забудьте добавить pdf.canvas.height = pdf.internal.pageSize.height - person Alexandr; 12.07.2017

arrow_upward
1
arrow_downward

Мы можем создавать PDF из нескольких страниц, но создавать разделы страниц в HTML, разделенные по классам.

Затем мы можем объединить как jsPDF, так и html2canvas следующим образом.

    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);

полное руководство приведено здесь http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/

person Code Spy    schedule 16.03.2017