How to set Header Footer in options

[Amara-Balakrishna1]

Hi Can you please tell me how to keep header and footer in pdf . i have tried in runnings but giving an error. tell how to set in options. paersize Thanks in advance

[dustin-H]

Hey,

1. Read the Readme
2. When stuff written there is not working you can create an issue
3. When creating an issue because of an error, no one can help you when you do not append a error message.

[Amara-Balakrishna1]

Hey sorry for that here is my code.

var options = {
    "html" : "b.html",
    "css" : "style_v0.css",
    "paperSize":
            { 
                  format: 'A4', 
                  header: {
                      height: "1cm",
                      contents:"<h1>Header</h1>";
                  },
                  orientation: 'portrait', border: '2CM' 
             }
    };

 pdf.convert(options, function(result) {

    // result.toBuffer(function(returnedBuffer) {});

    // var stream = result.toStream();

    // var tmpPath = result.getTmpPath();

   result.toFile(id[0]+'.pdf', function() {console.log('success')});
});

the pdf i get has no header. is there any way to declare that header.?

[dustin-H]

You can do this by exporting a paperSize object from a runnings file and define this in your options.

[faisalshabbir]

Hi dustin, I hope you are doing good, I need your little help on exporting the paperSize object. Can you please give me the reference of any working example. I just posted one question at stackoverflow http://stackoverflow.com/questions/38139323/how-can-i-add-header-and-footer-in-pdf-page-using-phantom-html2pdf

You help is really appricated.

[dustin-H]

I'm afraid I can't help you @faisalshabbir . I have neither a working example nor any experience with that. I am just maintaining and trying to anwer some simple questions on this repo.

However since this is based on phantomJS this may helps you.

[faisalshabbir]

thanks for your reply. I am done with task. I will share the solution soon. So it can help some one else.

[faisalshabbir]

Runing file should look like this. module.exports will fix the problem for us.

module.exports = {
    header: {
        height: '3cm', contents: function (page) {
            return '<header class="pdf-header" style=" overflow:hidden; font-size: 10px; padding: 10px; margin: 0 -15px; color: #fff; background: none repeat scroll 0 0 #00396f;"><img style="float: left;" alt="" src="../images/logo.jpg"><p> XYZ </p></header>'
        }
    },

    footer: {
        height: '3cm', contents: function (page) {
            return '<footer class="pdf-footer" style="font-size: 10px; font-weight: bold; color: #000;><p style="margin: 0">Powered by XYZ</p></footer>'
        }
    },

}

[dustin-H]

Thanks @faisalshabbir ! I added this information to FAQ.

[fabioloreggian]

Hi there, I am struggling to get an image to show in my header

Can anyone assist?

[dustin-H]

Hi @fabioloreggian ,

since this is not the same issue, would you mind to create a new one for that. When you do please provide more information about what you already tried, where you failed, ...

Cheers, Dustin

[ashokduraik]

Runing file should look like this. module.exports will fix the problem for us.

module.exports = {
    header: {
        height: '3cm', contents: function (page) {
            return '<header class="pdf-header" style=" overflow:hidden; font-size: 10px; padding: 10px; margin: 0 -15px; color: #fff; background: none repeat scroll 0 0 #00396f;"><img style="float: left;" alt="" src="../images/logo.jpg"><p> XYZ </p></header>'
        }
    },

    footer: {
        height: '3cm', contents: function (page) {
            return '<footer class="pdf-footer" style="font-size: 10px; font-weight: bold; color: #000;><p style="margin: 0">Powered by XYZ</p></footer>'
        }
    },

}

Hi faisalshabbir, Could please explain the solution in more details? I want to set the header and footer dynamically.

[faisalshabbir]

Its simple module.export to return the object, so that header and footer settings can be set.

If you want to make it dynamic then you can create more module.exports files or chunks like

if(option == 1){
module.exports = {
    header: {
        height: '3cm', contents: function (page) {
            return '<header class="pdf-header" style=" overflow:hidden; font-size: 10px; padding: 10px; margin: 0 -15px; color: #fff; background: none repeat scroll 0 0 #00396f;"><img style="float: left;" alt="" src="../images/logo.jpg"><p> XYZ </p></header>'
        }
    },

    footer: {
        height: '3cm', contents: function (page) {
            return '<footer class="pdf-footer" style="font-size: 10px; font-weight: bold; color: #000;><p style="margin: 0">Powered by XYZ</p></footer>'
        }
    },

}
}

if you need to make a more dynamic solution, you need to to fill the variables dynamically and then export the module. Here is the little information about module.export, which will help you to make the solution dynamic https://www.sitepoint.com/understanding-module-exports-exports-node-js/

Hope, answer will help you.