Export Style Table to Word and PDF using React Rich Text Editor?

3 mins read

The React Rich Text Editor provides the functionality to export content into Word (DOCX) and PDF formats. However, default table styles may not be preserved due to unsupported external styles, resulting in unformatted tables in the exported documents.

The Rich Text Editor Component is configured with settings to handle toolbar actions, image uploads, and export options.

<RichTextEditorComponent
    id="exportDocument"
    exportPdf={exportPdf}
    exportWord={exportWord}
    value={rteValue}
    toolbarSettings={toolbarSettings}
    enableXhtml={true}
    actionBegin={actionBeginHandler.bind(this)}
    >
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport]} />
    </RichTextEditorComponent>

Export Settings

Define the service URLs and file names for exporting content to Word and PDF formats.

// Export settings
const exportWord = {
    serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToDocx',
    fileName: 'RichTextEditor.docx',
};
const exportPdf = {
    serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToPdf',
    fileName: 'RichTextEditor.pdf',
};

Toolbar Configuration

Configure the toolbar with various editing options, including export functions.

// RichTextEditor ToolbarSettings
const toolbarSettings = {
    items: ['Undo', 'Redo', '|', 'ExportWord', 'ExportPdf', '|', 'Bold', 'Italic', 'Underline', '|', 'CreateTable', '|', 'SourceCode'],
};

Enhancing Table Style on Export

To ensure tables are properly styled when exporting content from the Rich Text Editor to Word or PDF formats, you can apply inline styles using the actionBegin event. This event is triggered before any action is executed, giving you the opportunity to modify the content before it is exported.

By detecting export actions (ExportPdf or ExportWord), you can apply custom styles to tables in the editor’s content. After styling the table elements, the e.exportValue property is updated with the modified HTML content to ensure that the changes are reflected in the exported document.

Here’s a refined solution to enhance the appearance of tables when exporting:

function actionBeginHandler(e) {
  // Add custom table styles
  if (e.requestType === 'ExportPdf' || e.requestType === 'ExportWord') {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = e.exportValue;
    // Select the table using querySelector
    const table = tempDiv.querySelector('.e-rte-table');
    if (table) {
      table.style.borderCollapse = 'collapse';
      table.style.width = '100%';
      const thElements = table.querySelectorAll('th');
      thElements.forEach((th) => {
        th.style.border = '1px solid #ddd';
        th.style.fontWeight = 'bold';
        th.style.padding = '8px';
      });
      const tdElements = table.querySelectorAll('td');
      tdElements.forEach((td) => {
        td.style.border = '1px solid #ddd';
        td.style.padding = '8px';
        td.style.textAlign = 'center';
      });
    }
    e.exportValue = tempDiv.innerHTML;
  }
}

Conclusion

I hope you enjoyed learning how to export style table to word and pdf using React Rich Text Editor.

You can refer to our React Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our React Rich Text Editor Example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloadspage.

If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Additional References

Did you find this information helpful?

Yes

Comments