How to PDF export a dashboard

Want to export your dashboard screen views as PDFs? It's easy to do with just a few lines of code. Here’s how you can implement it:

Include Required Libraries in the screen header

In the header section of your dashboard, include the following libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

Add Export Button and Loading Indicator in the screen header

Next, add an "Export to PDF" button and a loading indicator to your dashboard:

<button id="export-to-pdf">Export to PDF</button>
<div id="loading-indicator" style="display: none;">⏳ Generating PDF...</div>
        

Implement the Export Function in the On-Render event

Now, add the following JavaScript code to capture the dashboard content and generate a PDF:

function exportDashboardToPDF() {
  const { jsPDF } = window.jspdf;
  const dashboardContainer = document.querySelector('.pf-cards');
  const loadingIndicator = document.getElementById('loading-indicator');
  
  // Show the loading indicator
  loadingIndicator.style.display = 'inline';

  // Capture the dashboard content using html2canvas
  html2canvas(dashboardContainer).then(canvas => {
    const pdf = new jsPDF('portrait');
    const imgData = canvas.toDataURL('image/png');

    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = pdf.internal.pageSize.getHeight();

    // Scale the image to fit the PDF page
    const scaleFactor = Math.min(pdfWidth / canvasWidth, pdfHeight / canvasHeight);
    const imgWidth = canvasWidth * scaleFactor;
    const imgHeight = canvasHeight * scaleFactor;
    const xOffset = (pdfWidth - imgWidth) / 2;
    const yOffset = (pdfHeight - imgHeight) / 2;

    pdf.addImage(imgData, 'PNG', xOffset, yOffset, imgWidth, imgHeight);

    // Save the PDF and hide the loading indicator
    pdf.save('dashboard.pdf');
    loadingIndicator.style.display = 'none';
  }).catch(() => {
    // Hide the loading indicator in case of an error
    loadingIndicator.style.display = 'none';
    alert('Failed to generate PDF. Please try again.');
  });
}

// Attach the function to the export button
document.getElementById('export-to-pdf').addEventListener('click', exportDashboardToPDF);
        

And that’s it! When the "Export to PDF" button is clicked, your dashboard content will be captured and saved as a PDF file.

Customizing the Settings

This code captures the content of the dashboard (in this example, the element with class .pf-cards) and converts it into a PDF document. You can modify the code to suit your dashboard's structure.

For more advanced configurations and customization options, visit the official documentation of jsPDF and html2canvas.

Feel free to experiment and make the solution fit your exact requirements.