web-dev-qa-db-fra.com

JSPDF - Page de toile multiple addHTML ()

J'ai remarqué que la version "addHTML () peut maintenant diviser le canevas en plusieurs pages" peut être trouvée via ce lien: https://github.com/MrRio/jsPDF/releases/tag/v1.0.138 .

Puis-je savoir comment cela fonctionne? Dans mon cas, je viens de l'essayer en cliquant sur le bouton "enregistrer en pdf", cela rend juste une seule page au lieu de plusieurs pages (parfois n'a pas fonctionné, je suppose que le contenu est trop long pour être généré en pdf) .

J'apprécierais s'il y a des exemples pour ce cas. Merci!

Ci-joint mes codes ci-dessous:

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

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

Le fractionnement du canevas en plusieurs pages fonctionne en fournissant une option "pagesplit":

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

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

pdf.addHtml ne fonctionne pas s'il y a des images svg sur la page Web .. Je copie la solution ici: // supposons que votre image est déjà dans une toile var imgData = canvas.toDataURL ('image/png');/* Voici les chiffres (largeur et hauteur du papier) que j'ai trouvé fonctionnels. Cela crée toujours une petite partie de chevauchement entre les pages, mais assez bien pour moi. si vous pouvez trouver un numéro officiel sur jsPDF, utilisez-les. * /

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');
7
Trilok Nagvenkar

Rien de ce qui précède ne m'a aidé, je vais donc mettre cela ici pour toute personne qui arrive sur cette page qui cherche à utiliser addHTML () pour créer un seul pdf divisé en plusieurs pages avec un élément html différent sur chaque page. J'ai utilisé la récursivité donc je ne suis pas sûr des implications de performance de cette approche. Cela a fonctionné pour moi de créer un pdf de 4 pages à partir de 4 éléments 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);
        });
}
6
Paddy

En utilisant pagesplit: true il étire toujours la sortie pdf. Essayez d'utiliser une ancienne version de jsPDF avec html2canvas bien sûr.

Partager le résultat de mon essai de 2 jours pour réaliser la multipage PDF avec addHTML pas fromHTML car il perd les règles 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>

alors le PDF devrait être très bien comme suit:

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

J'espère que cela vous aidera. Merci!

2
Abhijeet K.