RenderPDF.ioGet Free API Key

🖼️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 modeNextBest practices

Last updated