Html To Word Converter Reactive Module

Within the script, you can modify some CSS settings of the entire page, as shown in the image below.

Html To Word Converter Reactive Web Module

For proper functionality, the data to be exported to Word must be inside a container. This container should have a name to allow better usage.

Export from the current page
In the action, you must provide the ID or name of the main container where the content to be exported is located,
as well as the filename to be used for the Word document.

 Export through a dedicated page configured for Word

When selecting export, the user is redirected to another page that contains the export logic and then automatically closes.

Due to browser restrictions, the correct behavior should be:

• Open the new page via JavaScript

• The page will load and display on screen

• Once loading completes, the download is triggered

• After the download starts, the page is automatically closed
  It is possible to pass parameters through the URL.

• 
  

• 
  
  

• Exporting HTML to Word in OutSystems Reactive

   How it Works and the Role of CSS Classes

  When exporting HTML content to Word in OutSystems Reactive (using JavaScript along with FileSaver.js and a custom exportToWord function), it's important to understand how CSS classes influence the structure, styling, and compatibility of the generated document.

  ---

   1. What Gets Exported?

  During the export process:

  • The HTML content inside a specific widget is converted to .doc format (MHTML).
  • Only the visible, statically rendered HTML is included.
  • Inline CSS or styles defined within <style> tags can be preserved.
  • OutSystems theme classes or framework CSS may not be included unless explicitly handled.

• ---

   2. Important: OutSystems Classes ≠ Exported Styles

  The CSS classes used in Reactive Web apps (like OSInline, Heading1, TableRecords, etc.):

  • Are applied at runtime by the OutSystems framework
  • Are not automatically included in the Word file
  • External or global stylesheets are not interpreted by Microsoft Word

• ---

   3. Best Practices for Correct Styling in Word Export

  Recommendation	Why
  Use inline CSS or embed a <style> tag during export	Word reads styles only if they are included inside the MHTML structure
  ❌ Avoid relying on OutSystems theme classes	They won't be transferred unless embedded manually
  Set fixed table widths	e.g., table-layout: fixed; width: 100%; prevents layout breaking
  Define font-family, padding, border explicitly	Ensures style consistency between browser and Word
  Manually set page margins with CSS	Word may use default margins if not defined

  ---

  🧪 Example of Recommended Embedded Styles

  html

  CopiarEditar

  <style>

    table {

      width: 100%;

      border-collapse: collapse;

      font-family: Arial, sans-serif;

    }

    th, td {

      border: 1px solid #999;

      padding: 8px;

      line-height: 1.5;

    }

  </style>

  ---

   4. Summary

  To ensure a proper and professional Word export from OutSystems Reactive:

  • Embed styles directly into the exported HTML
  • Avoid relying solely on OutSystems-defined classes
    • Build HTML with Word-compatible structure (e.g., static tables, fixed layouts, embedded images)    
    • 
      
    • 
  •