Betterprint-specific Jinja examples

Let's try to use some basic & helpful features in Frappe Betterprint you need to know.

Add Page Break

Betterprint comes with a easy-to use page-break - just add this line to your Print Format Jinja:

{{ better_page_break() }}

CSS can still be used page breaks, just set break-before, break-after or break-inline property.

Add a header with 5cm height

In order to add a header, you can use a paginate-source element with data-key="header" :

<paginate-source data-key="header"><h1>This is my Header</h1></paginate-source>

You can set the header's height by simply adding this css snippet:

.page .header{
    height: 5cm;
    background-color: red;
}

Add a Footer with page number in it

Frappe Betterprint contains two reserved data-source keywords: pageNumberand totalPages . In order to use these, simply add this Jinja:

<paginate-source data-key="footer">
    <p>Page <paginate-target data-key="pageNumber"></paginate-target> of <paginate-target data-key="totalPages"></paginate-target></p>
<paginate-source>

Set individual Page size

Betterprint allows fully custom page sizes. Even really large sheets will be no problem. You can define your page size as follows:

/* Let's set the page size to A3 format */
.page{
    width: 29.7cm;
    height: 42cm;
}

You need to specify the page size using width and height. Passing any page size like A4 or Letter won't work as of now.