Export Once, Share Everywhere: Convert DOCX to PDF, HTML, and More in React

TL;DR: Still juggling multiple document tools just to share files in your React app? With the advanced export options in Syncfusion React DOCX Editor, you can generate DOCX, PDF, HTML, Markdown, and more from a single editor, with no broken formatting and no manual conversions. You can enable scalable document sharing, reduce conversion errors, and simplify collaboration across teams. The result is faster exports, consistent formatting, and a future-proof workflow that supports both lightweight client apps and enterprise-grade server deployments.

The real problem with document export in React apps

If you’ve ever built a document heavy React app, you already know the pain.

A document gets written once, but somehow needs to exist as a:

DOCX for editing,
PDF for approvals,
Markdown for internal docs,
HTML for publishing.

And the moment exporting isn’t built-in, everything slows down. Manual conversions might work once or twice, but they don’t scale. They introduce errors and waste time. People copy-paste content, use third-party converters, or redo the same work in multiple tools. Formatting breaks. Layouts shift. Everyone gets frustrated.

What you really need is one editor with multiple export options , all handled in a clean, predictable way.

This is exactly where the Syncfusion^® React DOCX Editor changes the game.

Advanced export options in React DOCX Editor

The Syncfusion React DOCX Editor supports a flexible, unified document export experience across teams and platforms. It uses fast, in‑browser exports for common formats and a server‑side Web API for formats that need higher accuracy.

Key features

Client‑side speed with server‑side reliability.
Export modern and legacy formats from one editor.
Consistent formatting across outputs.
Suitable for both lightweight and enterprise apps.

This hybrid approach delivers efficient exports without compromising quality.

Client-side exporting (Instant, no server)

For everyday use cases, exporting directly from the React app is often enough, with no server involved.

You can export to:

SFDT: For drafts, autosave, and round-trip editing.
DOCX: Share editable files via Microsoft Word or Google Docs.
DOTX: Use templates to maintain consistent branding and styles.
TXT: Export plain text for tickets, wikis, or simple tools.

Server-side exporting (Heavy lifting, perfect output)

Some formats need extra processing, especially when layout, pagination, or print quality matter. That’s where the server-side Web API comes in.

Using it, you can export to:

PDF: For finalized documents, printing, or e-signature.
HTML: Publish to web portals or embed in apps.
RTF: For compatibility with rich text editors.
Markdown: Ideal for developer docs and wikis.
ODT: A widely supported open format for cross-platform use.
WordML: Useful for XML-based workflows and systems that require structured document data.

Let’s build a React DOCX Editor and integrate both client-side and server-side export options. By the end, you’ll have a production-ready workflow for seamless document-sharing across formats and platforms.

Server-side export setup for React DOCX Editor

Follow these steps to set up a server-side Web API that enables exporting documents from the Syncfusion React DOCX Editor to formats like PDF, HTML, RTF, Markdown, and ODT.

Step 1: Create a new ASP.NET Core Web API project

First, create a new ASP.NET Core Web API project using your preferred development environment or the .NET CLI.

Step 2: Add the required NuGet packages

Then, install the following NuGet packages to enable document import and export functionalities:

Syncfusion.EJ2.WordEditor.AspNet.Core: Provides a server-side support for handling SFDT content from the Document Editor.
Syncfusion.DocIORenderer.Net.Core: Converts Word documents to formats like PDF, HTML, RTF, Markdown, ODT, and WordML.

Step 3: Define export endpoints in the controller

Add a controller named DocumentEditorController.cs to handle export requests. Include endpoint logic to process SFDT input and return converted documents.

Here’s how you can do it in code:

[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("Export")]
public FileStreamResult Export([FromBody] SaveParameter data)
{
    string fileName = data.FileName;
    string format = RetrieveFileType(string.IsNullOrEmpty(data.Format) ? fileName : data.Format);

    if (string.IsNullOrEmpty(fileName))
    {
        fileName = "Document1.docx";
    }

    WDocument document;
    if (format.ToLower() == ".pdf")
    {
        Stream stream = WordDocument.Save(data.Content, FormatType.Docx);
        document = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Docx);
    }
    else
    {
        document = WordDocument.Save(data.Content);
    }

    return SaveDocument(document, format, fileName);
}

private string RetrieveFileType(string name)
{
    int index = name.LastIndexOf('.');
    string format = index > -1 && index < name.Length - 1
        ? name.Substring(index)
        : ".doc";
    return format;
}

private FileStreamResult SaveDocument(WDocument document, string format, string fileName)
{
    Stream stream = new MemoryStream();
    string contentType = "";

    if (format.ToLower() == ".pdf")
    {
        contentType = "application/pdf";
        DocIORenderer render = new DocIORenderer();
        PdfDocument pdfDocument = render.ConvertToPDF(document);
        stream = new MemoryStream();
        pdfDocument.Save(stream);
        pdfDocument.Close();
    }
    else
    {
        WFormatType type = GetWFormatType(format);
        switch (type)
        {
            case WFormatType.Rtf:
                contentType = "application/rtf";
                break;
            case WFormatType.WordML:
                contentType = "application/xml";
                break;
            case WFormatType.Html:
                contentType = "application/html";
                break;
            case WFormatType.Dotx:
                contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.template";
                break;
            case WFormatType.Docx:
                contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
                break;
            case WFormatType.Doc:
                contentType = "application/msword";
                break;
            case WFormatType.Dot:
                contentType = "application/msword";
                break;
            case WFormatType.Odt:
                contentType = "application/vnd.oasis.opendocument.text";
                break;
            case WFormatType.Markdown:
                contentType = "text/markdown";
                break;
        }
        document.Save(stream, type);
    }

    document.Close();
    stream.Position = 0;

    return new FileStreamResult(stream, contentType)
    {
        FileDownloadName = fileName
    };
}

internal static WFormatType GetWFormatType(string format)
{
    if (string.IsNullOrEmpty(format))
        throw new NotSupportedException("EJ2 Document Editor does not support this file format.");

    switch (format.ToLower())
    {
        case ".dotx":
            return WFormatType.Dotx;
        case ".docx":
            return WFormatType.Docx;
        case ".docm":
            return WFormatType.Docm;
        case ".dotm":
            return WFormatType.Dotm;
        case ".dot":
            return WFormatType.Dot;
        case ".doc":
            return WFormatType.Doc;
        case ".rtf":
            return WFormatType.Rtf;
        case ".txt":
            return WFormatType.Txt;
        case ".xml":
            return WFormatType.WordML;
        case ".odt":
            return WFormatType.Odt;
        case ".html":
            return WFormatType.Html;
        case ".md":
            return WFormatType.Markdown;
        default:
            throw new NotSupportedException("EJ2 Document Editor does not support this file format.");
    }
}

Step 4: Run the web API

Build and run the web API locally to verify that the export endpoints are working as expected.

Client-side setup: Create a React DOCX Editor

Once your server-side export API is up and running, you can move on to building the client-side React app using the Syncfusion React Document Editor.

It allows users to view, edit, and export Word documents directly in the browser without relying on external plugins.

Step 1: Create a new React app

First, create a new React project on the local machine.

Step 2: Install the Syncfusion React Document Editor

Now, install the Syncfusion React DOCX Editor NPM package.

npm install @syncfusion/ej2-react-documenteditor --save

Step 3: Import the required styles

To ensure proper styling, import the necessary CSS styles in your App.css or index.css file.

Here’s the code you need:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';

Step 4: Integrate the React DOCX Editor with advanced export options

Now, create the Exporting.js file in thesrc folder to render the DOCX Editor and configure the advanced export options using the Web API.

Code example for quick integration:

import * as React from 'react';
import { useEffect, useRef } from 'react';
import { DocumentEditorContainerComponent, Ribbon } from '@syncfusion/ej2-react-documenteditor';
import "./index.css";

DocumentEditorContainerComponent.Inject(Ribbon);

// Add the Service URL for server-dependent features
let hostUrl = "http://localhost:5257/api/documenteditor/";

const Exporting = () => {
    const container = useRef(null);
    const defaultSFDT = `{
        "sections": [{
            "blocks": [{
                "inlines": [{
                    "text": "Welcome to Syncfusion Document Editor!",
                    "characterFormat": {
                        "bold": true,
                        "fontSize": 14
                    }
                }]
            }]
        }]
    }`;

    useEffect(() => {
        if (container.current) {
            container.current.documentEditor.open(defaultSFDT);
            container.current.documentEditor.documentName = 'Getting Started';
            container.current.documentEditor.focusIn();
        }
    }, []);

    // Ribbon File tab Export menu
    const ribbonExportItems = [
        { text: 'Word Document (*.docx)', id: 'docx' },
        { text: 'Syncfusion Document Text (*.sfdt)', id: 'sfdt' },
        { text: 'Plain Text (*.txt)', id: 'text' },
        { text: 'Word Template (*.dotx)', id: 'dotx' },
        { text: 'PDF (*.pdf)', id: 'pdf' },
        { text: 'HyperText Markup Language (*.html)', id: 'html' },
        { text: 'OpenDocument Text (*.odt)', id: 'odt' },
        { text: 'Markdown (*.md)', id: 'md' },
        { text: 'Rich Text Format (*.rtf)', id: 'rtf' },
        { text: 'Word XML Document (*.xml)', id: 'wordml' },
    ];

    const fileMenuItems = [
        'New',
        'Open',
        { text: 'Export', id: 'export', iconCss: 'e-icons e-export', items: ribbonExportItems },
        ‘Print’,
    ];

    // Common export handler used by Ribbon menu
    const handleExportById = (value) => {
        switch (value) {
            case 'docx':
                container.current.documentEditor.save('Sample', 'Docx');
                break;
            case 'sfdt':
                container.current.documentEditor.save('Sample', 'Sfdt');
                break;
            case 'text':
                container.current.documentEditor.save('Sample', 'Txt');
                break;
            case 'dotx':
                container.current.documentEditor.save('Sample', 'Dotx');
                break;
            case 'pdf':
                formatSave('Pdf');
                break;
            case 'html':
                formatSave('Html');
                break;
            case 'odt':
                formatSave('Odt');
                break;
            case 'md':
                formatSave('Md');
                break;
            case 'rtf':
                formatSave('Rtf');
                break;
            case 'wordml':
                formatSave('Xml');
                break;
            default:
                break;
        }
    };

    const onFileMenuItemClick = (args) => {
        if (args && args.item && args.item.id) {
            if (args.item.id !== 'export') {
                handleExportById(args.item.id);
            }
        }
    };

    function formatSave(type) {
        let format = type;
        let url = container.current.documentEditor.serviceUrl + 'Export';
        let fileName = container.current.documentEditor.documentName;
        let http = new XMLHttpRequest();
        http.open('POST', url);
        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        http.responseType = 'blob';

        let sfdt = {
            Content: container.current.documentEditor.serialize(),
            Filename: fileName,
            Format: '.' + format
        };

        http.onload = function () {
            if (http.status === 200) {
                let responseData = http.response;
                let blobUrl = URL.createObjectURL(responseData);
                let downloadLink = document.createElement('a');
                downloadLink.href = blobUrl;
                downloadLink.download = fileName + '.' + format.toLowerCase();
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
                URL.revokeObjectURL(blobUrl);
            } else {
                console.error('Request failed with status:', http.status);
            }
        };

        http.send(JSON.stringify(sfdt));
    }

    return (
        <div className="control-pane">
            <div className="control-section">
                <div id="documenteditor_container_body">
                    <DocumentEditorContainerComponent
                        id="container"
                        ref={container}
                        style={{ display: 'block' }}
                        height={'690px'}
                        toolbarMode="Ribbon"
                        ribbonLayout="Classic"
                        serviceUrl={hostUrl}
                        enableToolbar={true}
                        locale="en-US"
                        fileMenuItems={fileMenuItems}
                        fileMenuItemClick={onFileMenuItemClick}
                    />
                </div>
            </div>
        </div>
    );
};

export default Exporting;

Step 5: Launch the application

To see the React DOCX Editor in action:

Start your Web API service.
Then, run your React app using the following command.

npm start

This article was originally published at Syncfusion.com.