CODEWITHSUNDEEP
node.jspdfexpresspdfkit
Akhil Gopan
Akhil Gopan

Reputation: 141

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

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.

Upvotes: 8

Views: 26553

Answers (5)

PotatoFarmer
PotatoFarmer

Reputation: 2974

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);
    
  //Header: Add page number
  let oldTopMargin = doc.page.margins.top;
  doc.page.margins.top = 0 //Dumb: Have to remove top margin in order to write into it
  doc
    .text(
      `Page: ${i + 1} of ${pages.count}`,
      0,
      (oldTopMargin/2), // Centered vertically in top margin
      { align: 'center' }
    );
  doc.page.margins.top = oldTopMargin; // ReProtect top margin

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

Upvotes: 9

jonathan gutierrez villamarin
jonathan gutierrez villamarin

Reputation: 170

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

Upvotes: 17

Kevin Simon
Kevin Simon

Reputation: 21

this works for me

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

    for (let i = range.start; i <= (doc._pageBufferStart + 
    doc._pageBuffer.length - 1); i++) {

    doc.switchToPage(i);

        doc.font('Times-Roman').fontSize(8).text('Footer', 90, 
    doc.page.height - 40, {
    lineBreak: false
  });

}

Upvotes: 2

Paul
Paul

Reputation: 89

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

Upvotes: 3

Ali
Ali

Reputation: 176

You can do this : 

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

Upvotes: 16

Related Questions