Template & Styling

Main content

The heart of the PDF content, isn't it? For this, you need to send a whole HTML document.

Recommended:

<html>
<head>
    <title>Your title here</title>
    <style>
        // put all styles here
    </style>
</head>
<body>
    // add magic here
</body>
</html>

Remote paths for images, fonts (e.g., Google Fonts), etc., work too.

TailwindCSS also works great, give it a go 😎.

Header & Footer

If you want to use footer or header or both, you need to send a whole HTML document, e.g.:

<html>
<head>
    <style>
    body {
        font-size: 12px;
        margin: auto 20px;
    }
    </style>
</head>
<body>
<p><span class="pageNumber"></span> of <span class="totalPages"></span></p>
</body>
</html>

The following classes allow you to inject printing values:

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

Limitation

No JavaScript.
The CSS properties are independent of the ones from the HTML document.
- Also simple CSS only.
footer.html CSS properties override the ones from header.html.
Images only work using a base64 encoded source - i.e., data:image/png;base64, iVBORw0K....
background-color and color CSS properties require an additional -webkit-print-color-adjust: exact CSS property to work.
Assets are not loaded (i.e., CSS files, scripts, fonts, etc.).
- For fonts, check out the section below.
Background form fields do not apply.

Fonts

Main content can use remote URLs for fonts

Recommended CDN: Google Fonts or CDNFonts

Here are the built-in fonts that you can define in your styles.

Microsoft True Type fonts

Andale Mono
Arial Black
Arial (Bold, Italic, Bold Italic)
Comic Sans MS (Bold)
Courier New (Bold, Italic, Bold Italic)
Georgia (Bold, Italic, Bold Italic)
Impact
Times New Roman (Bold, Italic, Bold Italic)
Trebuchet (Bold, Italic, Bold Italic)
Verdana (Bold, Italic, Bold Italic)
Webdings

Others

beng
hosny-amiri
lklug-sinhala
lohit-guru
lohit-knda
samyak-gujr
samyak-mlym
samyak-taml
sarai
sil-abyssinica
sil-padauk
telu thai-tlwg
ttf-wqy-zenhei
arphic-ukai
arphic-uming
ipafont-mincho
ipafont-gothic
uncore
crosextra-caladea
crosextra-carlito
dejavu
dejavu-extra
liberation
liberation2
linuxlibertine
noto-cjk
noto-core
noto-mono
noto-ui-core
sil-gentium
sil-gentium-basic

Page Break

In case that you want to have a page break, you can use this CSS styling to achieve that:

<html>
    <head>   
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Paginated HTML</title>
        <style>
             div.page {
                page-break-after: always; 
                page-break-inside: avoid;
            }   
        </style> 
    <head>
    <body> 
        <div class="page">
            <h1>This is Page 1</h1>
        </div>
        <div class="page">
            <h1>This is Page 2</h1>
        </div>
        <div class="page">
            <h1>This is Page 3</h1>
        </div>
    </body>
</html>

PreviousAsync mode NextBest practices

Last updated 11 months ago

<html> <head> <style> body { font-size: 12px; margin: auto 20px; } </style> </head> <body> <p><span class="pageNumber"></span> of <span class="totalPages"></span></p> </body> </html>

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Paginated HTML</title> <style> div.page { page-break-after: always; page-break-inside: avoid; } </style> <head> <body> <div class="page"> <h1>This is Page 1</h1> </div> <div class="page"> <h1>This is Page 2</h1> </div> <div class="page"> <h1>This is Page 3</h1> </div> </body> </html>