screeenly docs

Appearance

Print Header and Footers in PDFs ​

By default, a PDF will not show the header and footer that is generated by the browser. However, you can enable them by setting show_browser_header_and_footer to true in your API payload.

You can then set the header and footer HTML by using the header_html and footer_html parameters.

json
{
    "html": "<h1>Hello, World!</h1>",
    "file_type": "pdf",
    "paper_format": "A4",
    "paper_margins_top": "10",
    "paper_margins_right": "10",
    "paper_margins_bottom": "10",
    "paper_margins_left": "10",
    "show_browser_header_and_footer": true,
    "header_html": "<h1>Header</h1>",
    "footer_html": "<h1>Footer</h1>"
}

Often you would like to show values like the current date, the document title, the current page number or the total number of pages in the header and footer. You can achieve this by adding the following classes to the HTML you pass to header_html and footer_html.

  • date formatted print date
  • title document title
  • url document location
  • pageNumber current page number
  • totalPages total pages in the document

For example, if you would like to display the date and title in the header and the page number and total pages in the footer, you can use the following HTML. Please note that the CSS between the header and footer and the content that is being captured is not shared. You have to define the CSS for the header and footer in the header_html and footer_html parameters.

json
{
    "url": "https://en.wikipedia.org/wiki/Special:Random",
    "file_type": "pdf",
    "paper_format": "A4",
    "paper_margins_top": "10",
    "paper_margins_right": "10",
    "paper_margins_bottom": "10",
    "paper_margins_left": "10",
    "show_browser_header_and_footer": true,
    "header_html": "<div style='width: 100%; font-size: 20em; padding-left: 1cm; padding-right: 1cm; margin-bottom: .5cm;'><span class='date'></span><span class='title'></span></div>",
    "footer_html": "<div style='width: 100%; font-size: 20em; padding-left: 1cm; padding-right: 1cm; margin-bottom: .5cm;'><span class='pageNumber'></span> / <span class='totalPages'></span></div>"
}

You can give this a try in the playground. Import the API payload and hit "Run Playground" to generate the PDF.