[{"data":1,"prerenderedAt":346},["Reactive",2],{"/guides/node/node-fetch/adding-a-custom-header-or-footer":3,"related:g8Nuxptbvm":264},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"language":10,"library":11,"property":12,"output":13,"related":14,"default":6,"body":19,"_type":259,"_id":260,"_source":261,"_file":262,"_extension":263},"/guides/node/node-fetch/adding-a-custom-header-or-footer","node-fetch",false,"","Adding a custom header or footer","Discover how to add custom headers or footers to a PDF using Node and the NodeFetch library. This in-depth guide includes Node codes that you can easily follow and quickly generate documents with PDFShift's API.","Node","NodeFetch","header","pdf",[15,16,17,18],"loading-css-from-a-string","loading-css-from-a-url","loading-javascript-from-a-string","loading-javascript-from-a-url",{"type":20,"children":21,"toc":256},"root",[22,30,59,71,141,152,157,169,180,185,251],{"type":23,"tag":24,"props":25,"children":26},"element","p",{},[27],{"type":28,"value":29},"text","In this guide, we'll show you how to add custom headers or footers to a PDF using Node and the NodeFetch library.",{"type":23,"tag":24,"props":31,"children":32},{},[33,35,41,43,49,51,57],{"type":28,"value":34},"We'll focus this guide on the ",{"type":23,"tag":36,"props":37,"children":39},"code",{"className":38},[],[40],{"type":28,"value":12},{"type":28,"value":42}," parameter, but know that the ",{"type":23,"tag":36,"props":44,"children":46},{"className":45},[],[47],{"type":28,"value":48},"footer",{"type":28,"value":50}," parameter works ",{"type":23,"tag":52,"props":53,"children":54},"em",{},[55],{"type":28,"value":56},"exactly",{"type":28,"value":58}," the same way.",{"type":23,"tag":24,"props":60,"children":61},{},[62,64,69],{"type":28,"value":63},"The ",{"type":23,"tag":36,"props":65,"children":67},{"className":66},[],[68],{"type":28,"value":12},{"type":28,"value":70}," parameter is an object that accepts the following parameters:",{"type":23,"tag":72,"props":73,"children":74},"ul",{},[75,87,130],{"type":23,"tag":76,"props":77,"children":78},"li",{},[79,85],{"type":23,"tag":36,"props":80,"children":82},{"className":81},[],[83],{"type":28,"value":84},"source",{"type":28,"value":86},": The source of the header. It can be a URL or a raw HTML document. You can also provide some variables that we'll explain at the bottom of this guide.",{"type":23,"tag":76,"props":88,"children":89},{},[90,96,98,104,106,112,114,120,122,128],{"type":23,"tag":36,"props":91,"children":93},{"className":92},[],[94],{"type":28,"value":95},"height",{"type":28,"value":97},": The height of the header. By default, the height is in pixels, but you can also use ",{"type":23,"tag":36,"props":99,"children":101},{"className":100},[],[102],{"type":28,"value":103},"mm",{"type":28,"value":105},", ",{"type":23,"tag":36,"props":107,"children":109},{"className":108},[],[110],{"type":28,"value":111},"cm",{"type":28,"value":113}," or ",{"type":23,"tag":36,"props":115,"children":117},{"className":116},[],[118],{"type":28,"value":119},"in",{"type":28,"value":121}," as units, like ",{"type":23,"tag":36,"props":123,"children":125},{"className":124},[],[126],{"type":28,"value":127},"10mm",{"type":28,"value":129},".",{"type":23,"tag":76,"props":131,"children":132},{},[133,139],{"type":23,"tag":36,"props":134,"children":136},{"className":135},[],[137],{"type":28,"value":138},"start_at",{"type":28,"value":140},": The page number where the header should start. By default, the header will start at the first page.",{"type":23,"tag":24,"props":142,"children":143},{},[144,150],{"type":23,"tag":145,"props":146,"children":147},"strong",{},[148],{"type":28,"value":149},"NOTE",{"type":28,"value":151},": You must provide the full data in the header/footer, and not via a network request. Loading files such as external CSS, Js or Fonts won't work in the header or footer.\nInstead, we recommend you to embed them in Base64.",{"type":23,"tag":24,"props":153,"children":154},{},[155],{"type":28,"value":156},"Here's an example:",{"type":23,"tag":158,"props":159,"children":164},"pre",{"className":160,"code":162,"language":163,"meta":7},[161],"language-javascript","const fetch = require('node-fetch');\nconst fs = require('fs');\n\n// You can get an API key at https://pdfshift.io\napi_key = 'sk_xxxxxxxxxxxx'\n\nparams = {\n    source: 'https://en.wikipedia.org/wiki/PDF',\n    header: {\n        source: '\u003Cdiv>Page {{ page }} over a total of {{ total }}. Made on {{ date }}\u003C/div>',\n        height: 150,\n        start_at: 2\n    }\n}\n\nconst response = await fetch('https://api.pdfshift.io/v3/convert/pdf', {\n    method: 'post',\n    headers: {\n        'X-API-Key': api_key,\n        'Content-Type': 'application/json'\n    },\n    body: JSON.stringify(params)\n});\n\nif (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n}\n\nfs.writeFileSync('result.pdf', response.buffer());\n\nconsole.log('The PDF document was generated and saved to result.pdf');\n","javascript",[165],{"type":23,"tag":36,"props":166,"children":167},{"__ignoreMap":7},[168],{"type":28,"value":162},{"type":23,"tag":24,"props":170,"children":171},{},[172,173,178],{"type":28,"value":63},{"type":23,"tag":36,"props":174,"children":176},{"className":175},[],[177],{"type":28,"value":84},{"type":28,"value":179}," parameter present in the header/footer accepts a set of variables that will be translated when converting the document.",{"type":23,"tag":24,"props":181,"children":182},{},[183],{"type":28,"value":184},"Here are the properties you can use:",{"type":23,"tag":72,"props":186,"children":187},{},[188,199,210,221,232],{"type":23,"tag":76,"props":189,"children":190},{},[191,197],{"type":23,"tag":36,"props":192,"children":194},{"className":193},[],[195],{"type":28,"value":196},"{{ title }}",{"type":28,"value":198},": The title of the document.",{"type":23,"tag":76,"props":200,"children":201},{},[202,208],{"type":23,"tag":36,"props":203,"children":205},{"className":204},[],[206],{"type":28,"value":207},"{{ url }}",{"type":28,"value":209},": The URL of the document.",{"type":23,"tag":76,"props":211,"children":212},{},[213,219],{"type":23,"tag":36,"props":214,"children":216},{"className":215},[],[217],{"type":28,"value":218},"{{ page }}",{"type":28,"value":220},": The current page number.",{"type":23,"tag":76,"props":222,"children":223},{},[224,230],{"type":23,"tag":36,"props":225,"children":227},{"className":226},[],[228],{"type":28,"value":229},"{{ total }}",{"type":28,"value":231},": The total number of pages in the document.",{"type":23,"tag":76,"props":233,"children":234},{},[235,241,243,249],{"type":23,"tag":36,"props":236,"children":238},{"className":237},[],[239],{"type":28,"value":240},"{{ date }}",{"type":28,"value":242},": The current date in the format ",{"type":23,"tag":36,"props":244,"children":246},{"className":245},[],[247],{"type":28,"value":248},"M/D/YY-H:MM am/pm",{"type":28,"value":250}," such as \"3/16/24, 2:04 PM\".",{"type":23,"tag":24,"props":252,"children":253},{},[254],{"type":28,"value":255},"This will allow you to generate a document that looks more like a printable version of a website, with page number and customized header and footer.",{"title":7,"searchDepth":257,"depth":257,"links":258},2,[],"markdown","content:guides:node:node-fetch:adding-a-custom-header-or-footer.md","content","guides/node/node-fetch/adding-a-custom-header-or-footer.md","md",[265,269,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342],{"_path":266,"title":267,"language":10,"library":11,"_id":268},"/guides/node/node-fetch/accessing-secured-pages","Accessing secured pages","content:guides:node:node-fetch:accessing-secured-pages.md",{"_path":4,"title":8,"language":10,"library":11,"_id":260},{"_path":271,"title":272,"language":10,"library":11,"_id":273},"/guides/node/node-fetch/adding-a-text-watermark","Adding a text watermark","content:guides:node:node-fetch:adding-a-text-watermark.md",{"_path":275,"title":276,"language":10,"library":11,"_id":277},"/guides/node/node-fetch/adding-an-image-watermark","Adding an image watermark","content:guides:node:node-fetch:adding-an-image-watermark.md",{"_path":279,"title":280,"language":10,"library":11,"_id":281},"/guides/node/node-fetch/avoid-conversion-on-error","Avoid the conversion on error when loading the document","content:guides:node:node-fetch:avoid-conversion-on-error.md",{"_path":283,"title":284,"language":10,"library":11,"_id":285},"/guides/node/node-fetch/convert-html-to-pdf-from-a-url","Convert an HTML document to PDF from a URL","content:guides:node:node-fetch:convert-html-to-pdf-from-a-url.md",{"_path":287,"title":288,"language":10,"library":11,"_id":289},"/guides/node/node-fetch/convert-html-to-pdf-from-raw-html","Convert an HTML document to PDF from raw HTML","content:guides:node:node-fetch:convert-html-to-pdf-from-raw-html.md",{"_path":291,"title":292,"language":10,"library":11,"_id":293},"/guides/node/node-fetch/define-a-time-limit","Define a time limit","content:guides:node:node-fetch:define-a-time-limit.md",{"_path":295,"title":296,"language":10,"library":11,"_id":297},"/guides/node/node-fetch/exporting-only-a-specific-set-of-pages","Exporting only a specific set of pages","content:guides:node:node-fetch:exporting-only-a-specific-set-of-pages.md",{"_path":299,"title":300,"language":10,"library":11,"_id":301},"/guides/node/node-fetch/generate-a-document-with-full-height","Generate a document with full height","content:guides:node:node-fetch:generate-a-document-with-full-height.md",{"_path":303,"title":304,"language":10,"library":11,"_id":305},"/guides/node/node-fetch/loading-css-from-a-string","Loading CSS from a string","content:guides:node:node-fetch:loading-css-from-a-string.md",{"_path":307,"title":308,"language":10,"library":11,"_id":309},"/guides/node/node-fetch/loading-css-from-a-url","Loading CSS from a URL","content:guides:node:node-fetch:loading-css-from-a-url.md",{"_path":311,"title":312,"language":10,"library":11,"_id":313},"/guides/node/node-fetch/loading-javascript-from-a-string","Loading Javascript from a string","content:guides:node:node-fetch:loading-javascript-from-a-string.md",{"_path":315,"title":316,"language":10,"library":11,"_id":317},"/guides/node/node-fetch/loading-javascript-from-a-url","Loading Javascript from a URL","content:guides:node:node-fetch:loading-javascript-from-a-url.md",{"_path":319,"title":320,"language":10,"library":11,"_id":321},"/guides/node/node-fetch/protecting-the-generated-pdf","Protecting the generated PDF","content:guides:node:node-fetch:protecting-the-generated-pdf.md",{"_path":323,"title":324,"language":10,"library":11,"_id":325},"/guides/node/node-fetch/receive-a-webhook-event","Receive a webhook event","content:guides:node:node-fetch:receive-a-webhook-event.md",{"_path":327,"title":328,"language":10,"library":11,"_id":329},"/guides/node/node-fetch/save-your-pdf-online-and-get-back-a-url","Save your PDF online and get back a URL","content:guides:node:node-fetch:save-your-pdf-online-and-get-back-a-url.md",{"_path":331,"title":332,"language":10,"library":11,"_id":333},"/guides/node/node-fetch/save-your-pdf-to-your-amazon-s3-bucket","Save your PDF to your Amazon S3 Bucket","content:guides:node:node-fetch:save-your-pdf-to-your-amazon-s3-bucket.md",{"_path":335,"title":336,"language":10,"library":11,"_id":337},"/guides/node/node-fetch/send-custom-http-headers","Send custom HTTP headers","content:guides:node:node-fetch:send-custom-http-headers.md",{"_path":339,"title":340,"language":10,"library":11,"_id":341},"/guides/node/node-fetch/using-cookies","Using cookies to convert HTML documents to PDF","content:guides:node:node-fetch:using-cookies.md",{"_path":343,"title":344,"language":10,"library":11,"_id":345},"/guides/node/node-fetch/waiting-for-a-custom-element-to-be-ready","Waiting for a custom element to be ready","content:guides:node:node-fetch:waiting-for-a-custom-element-to-be-ready.md",1785426830618]