Customize PDF export layout with CSS and Bootstrap

One of the great feature of Canvas is that the style of your dashboard can be different regardless of viewing it in a web browser or as PDF format.

For instance, your dashboard could have a grey background in the browser but when you print it, the background could change to white and the buttons could be replace with text:

You can achieve this outcome with just a few lines of CSS and one bootstrap class.

Inside the internal style sheet (<style> </style>), first define the grey background (#EAEAEA) of the page (page-view) and then to change the background when printing you need to define a new page-view background color inside the @media print CSS query:

        #page-view {            background-color: #EAEAEA;        }        @media print {            #page-view {                background-color: #FFF;            }        }

All CSS defined inside the @media print CSS query will be applied only when the dashboard will be printed into PDF.

To replace the buttons with their values, we need first to hide the buttons using CSS and then we use a Bootstrap class to show the filters value only when printing.

To hide buttons when printing, you just need to add the following code inside the @media print CSS class:

.btn {      display: none;      }

Note that the above code will hide all buttons in the page.

If you want to hide only a specific button, you will need to add an id to the HTML component so you can specify that out later. Take for instance a filter:

<div  id="filter" >

Now we then add the CSS code to @media print query:

#filter {         display:none;         }

Take a note also that we now use ‘#’ instead of ‘.’ in front of the id, we have just created. There should be lot of articles discussing CSS Selectors. To help on this article, just remember:

• ‘.’ means selecting all HTML elements with that CSS class. 
• ‘#’ means selecting all HTML elements with that ID.  

For those other sections that you only want to show during printing, you can use the visible-print-block Bootstrap class. For example, if we want to show the values of the filters on the section we have hidden previously, we can create another section and add the class there:

<div class="col-md-6 visible-print-block">     <h3> Filters: {{selections.version}} - {{selections.month}} {{selections.year}} - {{selections.region}} - {{selections.category}}    </h3> </div>

All HTML element inside the visible-print-block div will be shown only when report will be printed into PDF.

To learn more about how to customize your report depending on screen size or devices, you should check CSS Media Queries page on the w3school website.