Pdfmake: Adding page number

Created on 18 May 2017  Â·  14Comments  Â·  Source: bpampuch/pdfmake

Hi, this plugin is really awesome. but I have one query, how to add page number for each page???

var pdfContent = {
content: [
{
image: pdfIconsConfig.logo.svg,
alignment: 'center',
width:150
},
'\n', ,'\n',{
table: {
headerRows: 1,
widths: [ '6%','9%','8%','6%','9%','8%','6%','9%','8%','6%','9%','8%' ],
body:
}
},
],footer:{
margin:10,
columns: [
{
fontSize: 9,
text:[
{
text: '--------------------------------------------------------------------------' +
'\n',
margin: [0, 20]
},
{
text: '© xyz pvt., ltd.'
}
],
alignment: 'center'
}
]
},
defaultStyle:{
italics: true,
font: 'openSans'
}
};

I'm generating pdf for dynamic data. each an every the count will be differ. so how can I add page number based on the data range??? thanks in advance...

Most helpful comment

Yes, no problem, simple example:

    footer: function(currentPage, pageCount) {
        return {
            margin:10,
            columns: [
            {
                fontSize: 9,
                text:[
                {
                text: '--------------------------------------------------------------------------' +
                '\n',
                margin: [0, 20]
                },
                {
                text: '© xyz pvt., ltd. ' + currentPage.toString() + ' of ' + pageCount,
                }
                ],
                alignment: 'center'
            }
            ]
        };

    },

All 14 comments

see https://github.com/bpampuch/pdfmake#headers-and-footers :

var docDefinition = {
 footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; },
 header: function(currentPage, pageCount, pageSize) {
   // you can apply any logic and return any valid pdfmake element

   return [
     { text: 'simple text', alignment: (currentPage % 2) ? 'left' : 'right' },
     { canvas: [ { type: 'rect', x: 170, y: 32, w: pageSize.width - 170, h: 40 } ] }
   ]
 },
 (...)
};

Before tried this, that time it wasn't working. Now I fixed thanks, I'll close this issue

hi @liborm85, If I give directly like,
footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; } ,
this is woking... But I need to insert the page number with footer content, As in the above,
how could I keep page number after company name in the footer???

Yes, no problem, simple example:

    footer: function(currentPage, pageCount) {
        return {
            margin:10,
            columns: [
            {
                fontSize: 9,
                text:[
                {
                text: '--------------------------------------------------------------------------' +
                '\n',
                margin: [0, 20]
                },
                {
                text: '© xyz pvt., ltd. ' + currentPage.toString() + ' of ' + pageCount,
                }
                ],
                alignment: 'center'
            }
            ]
        };

    },

Thanks!!! its working.

Hi, I started using this plugin few days back, is there a way where I can use the page numbers inside the content of the document definition, I tried using the same function which we use in header or footer but this doesn't work. instead its printing the function:
I tried something like below:
{text: function(currentPage, pageCount){return currentPage.toString()}, style:'alignCenter'},

Thanks is Advance

I have same problem....
I far as I know you can access currentPage and pageCount from the header and footer section, and currentPage from the background section....

currentPage is available from background-layer, see https://github.com/bpampuch/pdfmake#background-layer.

I have tried this, but I want to display additional information only on the
last page. If I can get totalPages in background section to, it will
work..,.
"if (currentPage == totalPages) { I am on the last page }"

Is it possible to add totalPages parameter to the background section?

Thx your help!

2017-05-31 13:43 GMT+02:00 Libor M. notifications@github.com:

currentPage is available from background-layer, see
https://github.com/bpampuch/pdfmake#background-layer.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/bpampuch/pdfmake/issues/1000#issuecomment-305165923,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AbZs9Lxa3pAUsiy024c2xqHZrqmebWTPks5r_VJ-gaJpZM4Ne7Ii
.

+1, having pageCount in background layer section (like header and footer) would be very useful.

Great! Thank you very much!

  1. okt. 19. 19:00 ezt írta ("Brendan" notifications@github.com):

+1, having pageCount in background layer section (like header and footer)
would be very useful.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/bpampuch/pdfmake/issues/1000#issuecomment-337971906,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AbZs9AVz1ph5WTEm9CK6Kp_DCx9eV8vSks5st4ArgaJpZM4Ne7Ii
.

@liborm85 I am not sure if I understood correctly.
I am doing something like the example bellow, but the browser return this message:

Uncaught ReferenceError: footer is not defined

var docDefinition = {
 footer: function(currentPage) { return currentPage.toString()},
 content: [
      'some text',
      'some other text',
      ' maybe 2 or 3 iterations',
      footer
 ]
};

Variation to example of liborm85, this way not print number in first page:

    footer: function(currentPage, pageCount) {
       if (currentPage!=1) {
            return {
                margin:5,
                columns: [
                {
                    fontSize: 9,
                    text:[
                    {
                    text: '_______________________________________________________________________________________________________________________' +
                    '\n',
                    margin: [0, 40]
                    },
                    {
                    text: 'CORPORACIÓN COGNOX LIMITADA © 2018 - ' + currentPage.toString() + ' / ' + pageCount,
                    }
                    ],
                    alignment: 'center'
                }
                ]
            };
       }
    },

Yes, no problem, simple example:

    footer: function(currentPage, pageCount) {
        return {
            margin:10,
            columns: [
            {
                fontSize: 9,
                text:[
                {
                text: '--------------------------------------------------------------------------' +
                '\n',
                margin: [0, 20]
                },
                {
                text: '© xyz pvt., ltd. ' + currentPage.toString() + ' of ' + pageCount,
                }
                ],
                alignment: 'center'
            }
            ]
        };

    },

Thank you so much, maybe this is not related but how can I bind the this.variable inside the function? I got this error: Cannot read property 'img2' of undefined

footer: function(currentPage, pageCount) {
        var vm = this
        return {
          columns: [
            vm.img2,
            {text: 'Dpto. Técnico\n', bold: true, alignment: 'left', fontSize: 12, margin: [-25, 13, 0, 0] },
            {text: 'Division Acuacultura\n', alignment: 'left', fontSize: 10, margin: [-147, 25, 0, 0]},
            {text: 'Guayaquil - Ecuador', bold: true, alignment: 'left', fontSize: 12, margin: [-269, 36, 0, 0] },
            {text: `_______________________\n${name}\n${pathologyAnalysis.user.technical_advisor.full_name ? pathologyAnalysis.user.technical_advisor.full_name : ''}\n`,bold:true, alignment: 'center', fontSize: 10, margin: [-70, 15, 0, 0] }
          ]
        }
      }
Was this page helpful?
0 / 5 - 0 ratings

Related issues

imoum007 picture imoum007  Â·  3Comments

SummerSonnet picture SummerSonnet  Â·  3Comments

sayjeyhi picture sayjeyhi  Â·  3Comments

kumarandena picture kumarandena  Â·  3Comments

einfallstoll picture einfallstoll  Â·  3Comments