web-dev-qa-db-ja.com

jsPDFを使用してフッターをPDFに追加する

jsPDF apiからpdfを生成しています。ページ番号付きの各ページにフッターを追加します。

これを達成する方法。 fromHTMLプラグインからフッターを追加するオプションがありますが、私はHTMLなしで書いています。

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

自分で実装する必要があります。あなたはこのようなことをすることができます：

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()
8
Bas van Stein

私はこの投稿が古いことを知っていますが、別の解決策を提供します。まず、総ページ数を定義します。これを決定する方法は複数あるので、ここでは説明しません。

        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（ゼロベースなので）を使用してページ数を設定できます。

6
Reginald Goolsby

それは私にとっては仕事です：

私はちょうどA4用紙の座標を配置します。

For before doc.save（）を次のように追加するだけです。

//ドキュメントを作成します

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

// Some stuff
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Last page", 74, 150);

// PAGE NUMBERING
// Add Page number at bottom-right
// Get the number of pages
const pageCount = doc.internal.getNumberOfPages();

// For each page, print the page number and the total pages
for(var i = 1; i <= pageCount; i++) {
     // Go to page i
    doc.setPage(i);
     //Print Page 1 of 4 for example
    doc.text('Page ' + String(i) + ' of ' + String(pageCount),210-20,297-30,null,null,"right");
}

// Save the doc
doc.save('test.pdf');
3
Evandson Dantas

各ページに「現在のページ/ 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);
        }

うまくいくはずです。お役に立てれば。

3
V-Q-A NGUYEN

Stephen Collins が最良の答えです！ jspdf-autotable プラグインでうまく機能します。

これで結局ドキュメントに追加されるので、総ページ数が手軽に使える！

スティーブンコリンズの回答にスタイルを追加します。「page x of total」

const addFooters = doc => {
  const pageCount = doc.internal.getNumberOfPages()

  doc.setFont('helvetica', 'italic')
  doc.setFontSize(8)
  for (var i = 1; i <= pageCount; i++) {
    doc.setPage(i)
    doc.text('Page ' + String(i) + ' of ' + String(pageCount), doc.internal.pageSize.width / 2, 287, {
      align: 'center'
    })
  }
}


let doc = new jsPDF()

doc.text(...)
doc.autoTable(...)
addFooters(doc)
doc.save()
2
sainf

doc.save()を実行する前に、この関数を実行してください

function addFooters() {
    const pageCount = doc.internal.getNumberOfPages();
    for(var i = 0; i < pageCount; i++) {
        doc.text(String(i),196,285);
    }
}
1
Stephen Collins

コードを掘り下げた後、あなたが尋ねる機能は実装されていないと思います。しかし、htmlからフッターを生成する関数があり、このコードを使用して必要を満たすことができます。ただし、コードの一部が「bad hack」としてマークされていることに注意してください。

From 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;
    }
};
1
Ortomala Lokni