L'ajout d'un Pied de page au format pdf en utilisant jsPDF

Je suis de générer des pdf à partir de jsPDF api , je veux ajouter un pied de page de chaque page avec le numéro de page .

Comment atteindre cet objectif . Il est d'avoir la possibilité d'ajouter un pied de page à partir de fromHTML plugin , mais je suis en train d'écrire, sans HTML.

var doc = new jsPDF("portrait","px","a4");

github.com/MrRio/jsPDF vous pouvez vous référer à cet âge
J'ai essayé de chercher dans cette documentation de l'api , mais n'a pas trouvé de moyen pour ajouter un pied de page . Avez-vous une idée de comment faire cela?

OriginalL'auteur Sumeet | 2015-11-04

5

Vous avez à mettre en œuvre vous-même. Vous pouvez faire quelque chose comme ceci:
```
var doc = new jsPDF();
doc.page=1; //use this as a counter.

function footer(){ 
    doc.text(150,285, 'page ' + doc.page); //print number bottom right
    doc.page ++;
};

//and call footer() after each doc.addPage()
```
Je suis l'appel du pied de page de la fonction avant de addPage() la méthode , mais il n'est pas appelé si le pdf est d'une page seulement , comme il n'y a pas de page pour ajouter.

OriginalL'auteur Bas van Stein

Si vous besoin de quelque chose comme "page actuelle /totalPage" de l'affichage de chaque page.
À l'aide de "nombre Total de pages" plugin disponible dans jspdf v1.0+

Comment utiliser:

        var doc = new jsPDF();
        doc.page=1; //use this as a counter.
        var totalPagesExp = "{total_pages_count_string}";


        function footer(){ 
          var str = "Page " + doc.page;           
          if (typeof doc.putTotalPages === 'function') {
            str = str + "/" + totalPagesExp;
          }
          doc.text(150,285, str); //print number bottom right
        }

        //call footer() after each doc.addPage()

        //and before doc.save() do not forget put
        if (typeof doc.putTotalPages === 'function') {
            doc.putTotalPages(totalPagesExp);
        }

Il devrait fonctionner. Espérons que cette aide.

OriginalL'auteur V-Q-A NGUYEN

Après de creuser dans le code, je pense que la fonction que vous demandez n'est pas mis en œuvre. Mais il y a une fonction pour générer un pied de page html et vous pouvez utiliser ce code pour satisfaire vos besoin. Mais attention, une partie du code est marqué comme "mauvais hack".

De plugins/from_html.js

checkForFooter = function (elem, renderer, elementHandlers) {
//check if we can found a <footer> element
var footer = elem.getElementsByTagName("footer");
if (footer.length > 0) {
footer = footer[0];
//bad hack to get height of footer
//creat dummy out and check new y after fake rendering
var oldOut = renderer.pdf.internal.write;
var oldY = renderer.y;
renderer.pdf.internal.write = function () {};
DrillForContent(footer, renderer, elementHandlers);
var footerHeight = Math.ceil(renderer.y - oldY) + 5;
renderer.y = oldY;
renderer.pdf.internal.write = oldOut;
//add 20% to prevent overlapping
renderer.pdf.margins_doc.bottom += footerHeight;
//Create function render header on every page
var renderFooter = function (pageInfo) {
var pageNumber = pageInfo !== undefined ? pageInfo.pageNumber : 1;
//set current y position to old margin
var oldPosition = renderer.y;
//render all child nodes of the header element
renderer.y = renderer.pdf.internal.pageSize.height - renderer.pdf.margins_doc.bottom;
renderer.pdf.margins_doc.bottom -= footerHeight;
//check if we have to add page numbers
var spans = footer.getElementsByTagName('span');
for (var i = 0; i < spans.length; ++i) {
//if we find some span element with class pageCounter, set the page
if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" pageCounter ") > -1) {
spans[i].innerHTML = pageNumber;
}
//if we find some span element with class totalPages, set a variable which is replaced after rendering of all pages
if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" totalPages ") > -1) {
spans[i].innerHTML = '###jsPDFVarTotalPages###';
}
}
//render footer content
DrillForContent(footer, renderer, elementHandlers);
//set bottom margin to previous height including the footer height
renderer.pdf.margins_doc.bottom += footerHeight;
//important for other plugins (e.g. table) to start rendering at correct position after header
renderer.y = oldPosition;
};
//check if footer contains totalPages which shoudl be replace at the disoposal of the document
var spans = footer.getElementsByTagName('span');
for (var i = 0; i < spans.length; ++i) {
if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" totalPages ") > -1) {
renderer.pdf.internal.events.subscribe('htmlRenderingFinished', renderer.pdf.putTotalPages.bind(renderer.pdf, '###jsPDFVarTotalPages###'), true);
}
}
//register event to render footer on every new page
renderer.pdf.internal.events.subscribe('addPage', renderFooter, false);
//render footer on first page
renderFooter();
//prevent footer rendering
SkipNode['FOOTER'] = 1;
}
};

OriginalL'auteur Ortomala Lokni

Je sais que ce post est vieux, mais je vais vous proposer une autre solution.
Tout d'abord, définir le montant total de vos pages. Il y a plusieurs façons de déterminer ce que je n'irai pas dans les.

        var doc = new jsPDF('p', 'pt', 'letter');
doc.page = 1; //use this as a counter.
var totalPages = 10; //define total amount of pages
//HEADER
doc.setFontSize(20);//optional
doc.setTextColor(40);//optional
doc.setFontStyle('normal');//optional
doc.text("Report", 50, 22);//set your margins
//FOOTER
var str = "Page " + doc.page  + " of " +  totalPages;
doc.setFontSize(10);//optional
doc.text(str, 50, doc.internal.pageSize.height - 10);//key is the interal pageSize function
//Add Page content
.....
//Add new page and increase page count
doc.addPage();
doc.page ++;
//Begin process all over again.

Cela fonctionne bien dans une boucle, vous pouvez configurer votre compte de page en prenant votre tableau.longueur + 1 (comme c'est en partant de zéro).

Thnks pour la réponse , je suis coincé avec un autre problème avec jspdf . Car il ne supporte pas l'utf-8 ou multi support des caractères

OriginalL'auteur Reginald Goolsby

Vous devez vous connecter pour publier un commentaire.