Skip to main content

Export to PDF

This page details how to export dashboards programmatically and how to integrate custom widgets (See Your first custom widget) in PDF exports.

Display a dashboard for PDF export​

To export a dashboard to PDF, we first need to display it on screen, and nothing else. Other parts of the application such as the header, data model or tools are not expected to appear on the created PDF file.

Displaying a dashboard on screen (and nothing else) can be achieved by adding the ?export search parameter to the URL, for instance: http://my-atoti.com/?export#/dashboard/685.

Trigger a PDF export​

Triggering a PDF export can be done using the native window.print() browser method.

But the question is: when to call this method? Calling it too early would mean exporting the dashboard before it finishes loading. The generated PDF file would then show loading bars instead of its actual expected content.

In order to avoid this problem, Atoti UI fires a "dashboardLoaded" event after the current dashboard finishes loading, to signify that it is ready to be exported to PDF. It can be leveraged as follows:

document.addEventListener("dashboardLoaded", () => {
  window.print();
});

Integrate custom widgets into PDF exports​

To make a custom widget exportable to PDF, you must call its props.onLoaded() method after it finishes loading. Typically, this is after the widget runs its query (if it runs one) and after it renders. See WidgetPluginInDashboardProps. This will let the dashboard know that the widget has finished loading, and will allow for the "dashboardLoaded" event to be fired when all widgets are ready.

From there, users will be able to export dashboards to PDF when they contain this custom widget and you will also be able to trigger PDF exports programmatically on these dashboards as described above.