使用jsPDF添加頁腳到pdf使用jsPDF

Question

我從jsPDF api生成pdf，我想添加頁腳到頁碼的每個頁面。

如何實現這一點。它有從HTML插件添加頁腳的選項，但我沒有HTML寫作。

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

Answer 1

你必須實現它自己。你可以這樣做：

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

Answer 2

在深入研究代碼之後，我認爲你所要求的功能沒有實現。但是有一個函數可以從html生成頁腳，您可以使用此代碼來滿足您的需求。但是請注意，代碼的某些部分被標記爲「壞黑客」。

從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; 
    } 
}; 

Answer 3

如果你需要像「當前頁面/ totalPage」顯示爲每個頁面的東西。 使用 「總頁數」 插件在jspdf V1.0提供+

如何使用：

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

它應該工作。希望這可以幫助。

Answer 4

我知道這個帖子是舊的，但我會提供另一種解決方案。 首先定義您的總頁數。有多種方法可以確定這一點，所以我不會進入這一點。

 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. 

這種運作良好，在一個循環，你可以把你的array.length + 1設置你的頁面數量（因爲它是基於零）。