PDFMake.js Tutorial to Add Page Numbers With Border at Footer inside PDF Document in Browser Using JS

SOURCE CODE

index.html

<!doctype html>
<html lang='en'>

<head>
    <meta charset='utf-8'>
    <title>my example</title>
    <!-- pdfmake files: -->
    <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>
    <!-- html-to-pdfmake file: -->
    <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

</body>
<script>


    var dd = {
        pageMargins: [40, 40, 40, 100],
        footer: function (currentPage, pageCount) {
            return {
                table: {
                    body: [
                        [
                            { text: "Page " + currentPage.toString() + ' of ' + pageCount, alignment: 'right', style: 'normalText', margin: [0, 20, 50, 0] }
                        ],
                    ]
                },
                layout: 'Borders'
            };
        },
        content: [
            { text: 'Text bcbcvb', pageBreak: 'after' },
            { text: 'Text fgdfg', pageBreak: 'after' },
            { text: 'Text fgdfgdfg', pageBreak: 'after' },
        ]
    }
    pdfMake.createPdf(dd).download();



    // playground requires you to assign document definition to a variable called dd

</script>
</body>

</html>

<!doctype html>

<head>

<title>my example</title>

</head>

<body>

</body>

var dd = {

pageMargins: [40, 40, 40, 100],

footer: function (currentPage, pageCount) {

return {

table: {

body: [

[

{ text: "Page " + currentPage.toString() + ' of ' + pageCount, alignment: 'right', style: 'normalText', margin: [0, 20, 50, 0] }

]

layout: 'Borders'

};

content: [

{ text: 'Text bcbcvb', pageBreak: 'after' },

{ text: 'Text fgdfg', pageBreak: 'after' },

{ text: 'Text fgdfgdfg', pageBreak: 'after' },

]

}

pdfMake.createPdf(dd).download();

// playground requires you to assign document definition to a variable called dd

</script>

</body>

</html>

As you can see we have included the cdn of the pdfmake.js and then inside the javascript we are adding the page numbers inside the pdf document at the bottom of the pdf document. We have also added the border to the page numbers as shown below