Overview

PDF Generator with Base64 Export Widget

This widget allows you to generate a PDF from a specific HTML element on your Mendix application and export it as a Base64-encoded string. It is ideal for scenarios where you need to download styled content as a PDF and store it as binary data in Mendix.

Features

• Generate a PDF from an HTML element using html2pdf.js.
• Save the generated PDF as a Base64 string in a Mendix attribute.
• Set the PDF's filename dynamically.
• Trigger custom Mendix actions after PDF generation.
• Open the generated PDF in a new tab or browser window for preview.

Properties

• ClassName: CSS class of the HTML element to convert to a PDF.
• FileName: The desired name for the PDF file (e.g., Document.pdf).
• PDFName: Mendix attribute to store the filename of the generated PDF.
• Base64: Mendix attribute to store the Base64-encoded PDF data.
• onChangeAction: Optional Mendix action triggered after PDF generation.

How It Works

1. The widget identifies the target HTML element using the provided ClassName.
2. It generates a PDF using html2pdf.js and creates a Blob.
3. The PDF is converted into a Base64 string and stored in the Base64 Mendix attribute.
4. The filename is stored in the PDFName attribute.
5. A custom action (onChangeAction) can be executed after the data is updated.

Use Cases

• Generate and store receipts, reports, or invoices as Base64 in your Mendix application.
• Preview PDF files in the browser before downloading.
• Automate workflows requiring PDF generation and data storage.

Prerequisites

• Ensure that the Base64 and PDFName attributes are properly configured in your Mendix entity.
• The HTML content inside the target element should be styled for proper PDF rendering.

Dependencies

• html2pdf.js for PDF generation.

Documentation

Typical Usage Scenario

The PageToPDF Widget enables Mendix developers to convert parts of their Mendix pages into PDF files with ease. It offers three primary functionalities: downloading the PDF, previewing it in a new browser tab, or generating a Base64-encoded string of the PDF content.

Use Cases:

• Generating and downloading documents such as invoices, certificates, or reports.
• Allowing users to preview documents without downloading them.
• Storing PDF content as a Base64 string for backend processing or database storage.

Features and Limitations

Features:

1. Multiple Output Options:

   • Download File: Automatically downloads the generated PDF.
   • Preview File: Opens the generated PDF in a new browser tab.
   • Get Base64: Encodes the PDF as a Base64 string for storage or backend use.

2. Customizable Settings:

   • Specify the file name for the generated PDF.
   • Use a CSS class name to identify the DOM element(s) to include in the PDF.

3. Dynamic OnChange Support:

   • The onChangeAction microflow or nanoflow executes after generating the PDF or updating the Base64 attribute.

4. Detailed Logs for Debugging:

   • Logs messages and warnings in the browser console to help troubleshoot issues.
   • Includes proper logging for missing elements, invalid class names, or unsupported configurations.

5. Seamless CSS Styling:

   • Retains most basic styles, including fonts and layout, for visually accurate PDFs.

6. Error Handling:

   • Displays warnings or logs errors when issues occur, such as invalid class names or unsupported content.

7. Cross-Browser Compatibility:

   • Works on all modern browsers like Chrome, Edge, and Firefox.

Limitations:

• Complex CSS styling or external fonts may not render exactly as expected in the PDF.
• Content within dynamically hidden DOM elements will not be included in the PDF.
• Only supports A4 page format with portrait orientation in this version.

Dependencies [optional]

The PageToPDF Widget depends on the following:

1. html2pdf.js: A lightweight JavaScript library bundled within the widget for HTML-to-PDF conversion.
2. Modern Browsers: The widget uses JavaScript features supported by modern browsers.

Installation [optional]

1. Download the Widget: Obtain the widget from the Mendix Marketplace or a trusted repository.
2. Import the Widget: Add the widget to your Mendix project through the Mendix Studio Pro.
3. Place the Widget on the Page: Drag and drop the widget onto the desired page.

Configuration [optional]

1. Basic Configuration:

   • CSS Class Name: Set the ClassName to target specific DOM elements for PDF generation. Example: my-pdf-content.
   • File Name: Specify the FileName for the PDF. Do not include the .pdf extension.

2. Action Configuration:

   • fileOption: Choose one of the three options:
     • Download File
     • Preview File
     • Get Base64
   • PDFName Attribute: Bind this attribute to store the generated PDF file name.
   • Base64 Attribute: Bind this attribute to capture the Base64-encoded string of the PDF.

3. OnChange Microflow:

   • Bind the onChangeAction property to trigger a microflow or nanoflow after the PDF generation process is complete.

Known Bugs [optional]

• Invalid Class Name: If the specified ClassName does not exist, a warning is logged in the browser console, and the PDF generation fails.
• Rendering Issues: Content with advanced CSS styles (e.g., animations, transformations) or heavy images may not render perfectly in the PDF.
• Base64 Performance: Generating Base64 for large PDFs can take longer and may impact performance.

Frequently Asked Questions [optional]

Q1: What happens if the class name doesn't match any elements?A1: A warning is logged in the browser console, and the widget will not generate the PDF. Double-check the class name in the widget configuration.

Q2: Can I use dynamic class names?A2: Yes, as long as the class names are correctly applied to the elements in your Mendix page.

Q3: How does onChangeAction work?A3: After the widget generates the PDF or updates the Base64 attribute, it executes the microflow or nanoflow bound to the onChangeAction property.

Q4: Will external fonts work in the PDF?A4: External fonts may not render correctly unless included in the page or explicitly embedded in the HTML.