JSPDF - addHTML() Несколько холстов

Я уже заметил, что релиз "addHTML() теперь может разделить холст на несколько страниц", который можно найти по этой ссылке: https://github.com/MrRio/jsPDF/releases/tag/v1.0.138.

Могу ли я знать, как это работает? В моем случае, я просто попробовал это, нажав кнопку "сохранить как PDF", он просто отображает одну страницу вместо нескольких страниц (иногда это не сработало, я предполагаю, потому что контент слишком длинный, чтобы быть сгенерированным как pdf).

Пойми, если есть примеры для этого случая. Спасибо!

Присоединился кодам ниже:

var pdf = new jsPDF('p', 'pt', 'a4');

pdf.addHTML($(".pdf-wrapper"), function () {
    var string = pdf.output('datauristring');
    pdf.save("test.pdf");
});

Ответы

Ответ 1

Разделение полотна на несколько страниц выполняется с помощью опции "pageplit":

var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
         pagesplit: true
    };

pdf.addHTML($(".pdf-wrapper"), options, function()
{
    pdf.save("test.pdf");
});

Ответ 2

pdf.addHtml не работает, если на веб-странице есть изображения svg. Я копирую решение здесь://предположим, что ваша картина уже находится на холсте var imgData = canvas.toDataURL('image/png'); /* Вот числа (ширина и высота бумаги), которые я нашел для работы. Это по-прежнему создает небольшую часть перекрытия между страницами, но достаточно хорошо для меня. если вы можете найти официальный номер от jsPDF, используйте их. */

var imgWidth = 210; 
var pageHeight = 295;  
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;

var doc = new jsPDF('p', 'mm');
var position = 0;

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
  position = heightLeft - imgHeight;
  doc.addPage();
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
}
doc.save( 'file.pdf');

Ответ 3

Ничто из перечисленного не помогло мне, поэтому я поставлю это здесь для всех, кто приходит на эту страницу, чтобы использовать addHTML(), чтобы создать единый PDF-распад на несколько страниц с другим элементом html на каждой странице. Я использовал рекурсию, поэтому я не уверен в последствиях этого подхода. Это помогло мне создать 4-страничный PDF файл из 4 элементов div.

var pdf = new jsPDF('landscape');
        var pdfName = 'test.pdf';

        var options = {};

        var $divs = $('.myDivClass')                //jQuery object of all the myDivClass divs
        var numRecursionsNeeded = $divs.length -1;     //the number of times we need to call addHtml (once per div)
        var currentRecursion=0;

        //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                pdf.save(pdfName);
            }else{
                currentRecursion++;
                pdf.addPage();
                //$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
                //addHtml requires an html element. Not a string like fromHtml.
                pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    console.log(currentRecursion);
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

        pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
        });
}

Ответ 4

При использовании pagesplit: true он всегда растягивает выход в формате pdf. Постарайтесь использовать старую версию jsPDF с html2canvas, конечно.

Совместное использование результатов моей 2-дневной пробной версии для создания многостраничного PDF-генерации с addHTML not fromHTML, так как оно теряет правила CSS.

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

тогда PDF файл должен быть в порядке:

<script>

            $(window).on('load', function(){

                var pdf = new jsPDF('p', 'pt', 'a4');

                var pdfName = 'sample.pdf';

                var options = {
                    format: 'JPEG',
//                    pagesplit: true,
                    "background": '#000',
                };

                var fullPage = $('#Printout_21571')[0],
                    firstPartPage = $('#part-1')[0],
                    secondPartPage = $('#part-2')[0];

                pdf.addHTML(firstPartPage, 15, 20, options, function(){ pdf.addPage() });
                pdf.addHTML(secondPartPage, 15, 20, options, function(){});

                setTimeout(function() {

//                    pdf.save(pdfName);
                    var blob = pdf.output("blob");
                    window.open(URL.createObjectURL(blob));

                }, 600);
            })
        </script>

Надеюсь, это поможет. Спасибо!