How to add Header and footer content to pdfkit for node.js

Question

I would like to generate a pdf using node js (express). I need to add header and footer to every page with page numbers. Any help would be appreciated.

Thanks.

Solution 1

You can do this :

doc.text('This is a footer', 20, doc.page.height - 50, {
    lineBreak: false
  });

Solution 2

Adding a Footer on all pages

doc.addPage()

let bottom = doc.page.margins.bottom;
doc.page.margins.bottom = 0;
doc.text('Page 1', 0.5 * (doc.page.width - 100), doc.page.height - 50,
{
width: 100,
align: 'center',
lineBreak: false,
})

// Reset text writer position

doc.text('', 50, 50)
doc.page.margins.bottom = bottom;

let pageNumber = 1;

doc.on('pageAdded', () => {
    pageNumber++
    let bottom = doc.page.margins.bottom;
    doc.page.margins.bottom = 0;

    doc.text(
        'Pág. ' + pageNumber, 
        0.5 * (doc.page.width - 100),
        doc.page.height - 50,
        {
            width: 100,
            align: 'center',
            lineBreak: false,
        })

    // Reset text writer position
    doc.text('', 50, 50);
    doc.page.margins.bottom = bottom;
})

Solution 3

better than pdfKit i recommend pdfMake for you. my experience with pdfmake was awesome.https://www.npmjs.com/package/pdfmake

Solution 4

Adding content to every page using doc.on('pageAdded'... hook has the nasty side effect of hijacking your position (doc.x/doc.y) while filling in a page. Additionally, you have to set the autoFirstPage: false flag in order to inject your hook prior to first page creation.

I find using bufferPages mode and then making global edit to the pages at the end much more graceful/logical.

const doc = new PDFDocument({
  bufferPages: true
});

doc.text("Hello World")
doc.addPage();
doc.text("Hello World2")
doc.addPage();
doc.text("Hello World3")

//Global Edits to All Pages (Header/Footer, etc)
let pages = doc.bufferedPageRange();
for (let i = 0; i < pages.count; i++) {
  doc.switchToPage(i);

  //Footer: Add page number
  let oldBottomMargin = doc.page.margins.bottom;
  doc.page.margins.bottom = 0 //Dumb: Have to remove bottom margin in order to write into it
  doc
    .text(
      `Page: ${i + 1} of ${pages.count}`,
      0,
      doc.page.height - (oldBottomMargin/2), // Centered vertically in bottom margin
      { align: 'center' }
    );
  doc.page.margins.bottom = oldBottomMargin; // ReProtect bottom margin
}

doc.end();

Solution 5

about this library, I suggest to read the PDF documentation, it is a lot must complete that the online HTML doc.

Warning : To be able to write outside the main content area, you have to set height and width on text's function params.

so as seen pdf doc you can do :

const doc = new PDFDocument({bufferPages: true})

//addPage X times

const range = doc.bufferedPageRange();

for( let i = range.start; i <  (range.start + range.count); i++) {

  doc.switchToPage(i);
  doc.text(`Page ${i + 1} of ${range.count}`, 
            200, 
            doc.page.height - 40, 
            { height : 25, width : 100});
}

View more solutions

Comments

[Akhil Gopan]

Thank you. I wil let you know and accept this in some time.

[FireDragon]

i'm checking this out now and may switch to using this instead of pdfKit. thanks

[Sergiy Ostrovsky]

I'm getting TypeError: doc.bufferedPageRange is not a function. Using https://github.com/devongovett/pdfkit/releases/download/v0.6‌​.2/pdfkit.js

[PotatoFarmer]

Worth Noting: PDFkit won't let you write in the margins. That's why this answer unsets the bottom margin, writes, and then resets the bottom margin.

[rotimi-best]

This was the deal breaker for me doc.page.margins.bottom = 0. I needed to remove the margin and then add my custom footer design to it