When printing a report using Canvas, you can customize as much as you like the PDF output. There are lots of CSS properties that you can use such as CSS Media Queries to update for instance the background color of the PDF. The PDF can be very different from the HTML page.

One thing to be careful about when you print your page is the page break. To avoid a table or a chart to be divided between two pages, you can define in your HTML page where you want the page break to appear.

If you do not specify any page break in the HTML page when printing, your report can break anywhere:

This article describes how the page break works in the sample print:

• http://localhost:8080/samples/#/sample/print

Create a CSS class

At the top of the page, first you need to create a new CSS class. In the example below we create a new class called other-pages with the property page-break-before:always:

      .other-pages{
        page-break-before: always;
      }

page-break-before always insert a page break before an HTML element it is assigned to. There are other CSS properties that you can use such as page-break-after which insert a page break after an HTML element it is assigned to.

Add the CSS class to an HTML element

In the print example, we assigned the new CSS class to a div but you can add this class to any HTML element where you want the page break to happen:

<div class="row other-pages"  >

This div has now the CSS property to always break the page before, if you print the page you will see the page break just before the chart:

To add a third page to your report you just need to add a new div with the other-pages property:

<div class="row other-pages"  >
        Add a third page
</div> 

It is important to notice that the page break will appear only in the PDF, in the HTML page, it will be like a normal div:

After printing you will see a new page: