20 Aug 2018 Export your HTML dashboards to PDF

Exporting dashboards in different formats is one of those features that is in high demand by our customers. The most popular formats being excel and pdf. Exporting to PDF is especially challenging when you are faced with HTML based dashboards.
Many different aspects such as page layout, amount of content, etc. will affect the output of the PDF document. This is exactly the reason why most of the out-of-the-box Export to PDF functionalities do not match the expectations of the users … until now!

1. Export to PDF: HTML to PDF functionality

 
To address this specific challenge, we have developed the “Export to PDF” solution for HTML based dashboards. With this solution you´re able to export any HTML element to PDF exactly as it is displayed in your browser. Therefore, it lets you decide how the PDF will look like, without any surprises – as you can see in the example below.

Figure 1: HTML export to PDF

2. Create your corporate PDF report

As the functionality exports any kind of HTML structure, it is very easy to create automatized corporate reports. In order to achieve it, you only need to create the HTML elements that will reproduce your corporate template.

• Set up a suitable page size and layout:
   
  If you have to print the PDF document, setting up the page size will help you to ensure you achieve the desired print outcome. Depending on the use case, you might prefer the pdf to look like a presentation. In this case you can set the layout as horizontal, etc.
  In our case, we have set up an A4 landscape layout.

 

• Use page breaks to separate the content:
   
  Page breaks will help you to keep your content structured. You can set up a page break in each element of the HTML page. In our specific example we are adding a page break after each section.

 

• Add corporate headers/footers:
   
  It is fairly easy to create the corporate headers and footers in HTML. The export functionality will select those headers and footers and place them where needed.
   
  

  Figure 2: Corporate header and footer

   

• Add a Front and End page/footers:
   
  Using the same approach as above, we can create a first and a last page.
   
  

  Figure 3: Corporate first and last page

   

• Add an export to PDF button:
   
  The export to PDF button will let you control when and where the Export to PDF functionality will be called.
   
  

  Figure 4: Export to PDF button

   

  Below you can see a sample output of the PDF file after applying the above customizations:
   
  

  Figure 5: PDF Export

Conclusion

The solution that we developed enables you to create and export impressive and printable PDF documents from an interactive HTML dashboard in just one click.

Contact us if you would like to hear more about this customized solution!