My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. React
  3. DocumentEditor

Is It possible to embed DOC file in web page in React DOCX Editor?

Yes, it is absolutely possible to embed a DOC (or DOCX) file in a web page without using plugins using the Syncfusion® React DOCX Editor component. This dedicated UI component provides a rich, Word-like editing experience, enabling users to create, edit, view, and print Word documents directly within the browser, and can be easily integrated with server APIs to load and save documents.

This article provides a step-by-step guide to embedding the DOC (or DOCX) file in a web page using Syncfusion® React DOCX Editor.

Prerequisites

Before starting, ensure your development environment meets the following requirements:

  • Node.js: Version 14.0.0 or above
  • React: Version 15.5.4 or higher.

For detailed system requirements, refer to the documentation.

Steps to embed a DOC file in a web page

Step 1 : Create or use a React application

To embed a DOC file in a web page in your React application, you first need an existing application or create a new React application. Refer to the documentation to create a new React application.

Step 2 : Install the Syncfusion® DOCX Editor package

All the Syncfusion® React component packages are available in npmjs.com public registry. To install the Document Editor component, use the following command

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

Step 3: Create the Initial Web Page Layout

First, let’s create the simple “Adventure Works Cycles” web page. This is the “existing web page” before the editor is added.

  1. Update src/App.tsx with the following code for the page structure:
import React from 'react';
import './App.css';

function App() {
 return (
   <>
     <header>
       <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
       </div>
       <img src="/AdventureCycle.jpg" alt="Adventure Works Cycles Logo" className="logo">
       </img>
     </header>

     <main>
       <h2>Welcome to Our Site!</h2>
     </main>

     <footer>
       © {new Date().getFullYear()} Adventure Works Cycles. All rights reserved.
     </footer>
   </>
 );
}

export default App;

Note: Ensure your logo file AdventureCycle.jpg is in the public folder for this path to work.

  1. Replace the content of src/App.css with these minimal styles for the layout:
header {
 display: flex;
 align-items: center;
 justify-content: center;
 background: #f2f2f2;
 padding: 12px 24px;
 border-bottom: 1px solid #ddd;
}

.logo {
 height: 134px;
 width: auto;
 margin-bottom: 8px;
 align-items: center;
}

h1 {
 font-size: 2rem;
 font-weight: bold;
 margin: 0;
 color: #333;
 text-align: center;
}

main {
 padding: 24px;
}

h2 {
 margin: 0 0 16px;
 font-size: 1.5rem;
 color: #444;
 display: flex;
 align-items: center;
 justify-content: center;
}

.editor-box {
 margin-top: 16px;
}

footer {
 padding: 16px;
 text-align: center;
 color: #666;
 border-top: 1px solid #ddd;
 font-size: 0.9rem;
}

The web page currently looks like this:

Initial_Web_Page

Step 4 : Integrate the DOCX Editor into the Web Page

Now, let’s modify the web page to include the Syncfusion® DOCX Editor.

  1. Update src/App.tsx with the following code for the DOCX Editor to integrate with page structure:
import React, { useEffect, useRef } from 'react';
import './App.css';
import { DocumentEditorContainerComponent, Ribbon } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Ribbon);

function App() {
 const containerRef = useRef<DocumentEditorContainerComponent | null>(null);

 useEffect(() => {
   const container = containerRef.current;
   if (!container) return;
   const form = new FormData();
   form.append('DocumentName', 'Getting Started.docx');
   const url = container.serviceUrl + 'LoadDocument';
   const xhr = new XMLHttpRequest();
   xhr.open('POST', url, true);
   xhr.onreadystatechange = () => {
     if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
       container.documentEditor?.open(xhr.responseText);
     }
   };
   xhr.send(form);
 }, []);

 return (
   <>
     <header>
       <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
       </div>
       <img src="/AdventureCycle.jpg" alt="Adventure Works Cycles Logo" className="logo">
       </img>
     </header>

     <main>
       <h2>Welcome to Our Site!</h2>
       <div className="editor-box">
         <DocumentEditorContainerComponent
           id="doc-editor"
           ref={containerRef}
           height={'90vh'}
           serviceUrl="http://localhost:62869/api/documenteditor/"
           toolbarMode="Ribbon"
         />
       </div>
     </main>

     <footer>
       © {new Date().getFullYear()} Adventure Works Cycles. All rights reserved.
     </footer>
   </>
 );
}

export default App;
  1. Open src/App.css and add the following lines at the top:
@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";
@import "../node_modules/@syncfusion/ej2-ribbon/styles/material.css";

Step 5 : Add the license key

From v20.1.047 onwards, it is necessary to register a license key for Syncfusion® React components. For more information on obtaining and registering your license key, please refer to the documentation.

Step 6 : Initial client-side view

At this point, if you run your React application without a connected server, you will see the DOCX Editor’s UI embedded in the webpage, but it might not fully function until the serviceUrl points to a live backend. Open your terminal in the React project directory and run:

npm start

Step 7: Web API for importing Word documents

As the Syncfusion® DOCX editor client-side script requires the document in SFDT file format, you can convert the Word documents (.dotx, .docx, .dot, .doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format by using this Web API.

Create an ASP.NET Core Web API with the following example code for importing Word documents into Document Editor component.

[AcceptVerbs("Post")]
       [HttpPost]
       [EnableCors("AllowAllOrigins")]
       [Route("Import")]
       public string Import(IFormCollection data)
       {
           if (data.Files.Count == 0)
               return null;
           Stream stream = new MemoryStream();
           IFormFile file = data.Files[0];
           int index = file.FileName.LastIndexOf('.');
           string type = index > -1 && index < file.FileName.Length - 1 ?
               file.FileName.Substring(index) : ".docx";
           file.CopyTo(stream);
           stream.Position = 0;

           //Hooks MetafileImageParsed event.
           WordDocument.MetafileImageParsed += OnMetafileImageParsed;
           WordDocument document = WordDocument.Load(stream, GetFormatType(type.ToLower()));
           //Unhooks MetafileImageParsed event.
           WordDocument.MetafileImageParsed -= OnMetafileImageParsed;

           string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
           document.Dispose();
           return json;
       }

Refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use it for the serviceUrl property.

Step 8: Configure service URL and Load Document

Once your ASP.NET Core Web API service is running (e.g., http://localhost:62869/api/documenteditor/), update the serviceUrl property in your src/App.tsx file to point to this URL. Then, add the following code snippet to load the document in the DOCX Editor.

import React, { useEffect, useRef } from 'react';
import './App.css';
import { DocumentEditorContainerComponent, Ribbon } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Ribbon);

function App() {
  const containerRef = useRef<DocumentEditorContainerComponent | null>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    const form = new FormData();
    form.append('DocumentName', 'Getting Started.docx');
    const url = container.serviceUrl + 'LoadDocument';
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
        container.documentEditor?.open(xhr.responseText);
      }
    };
    xhr.send(form);
  }, []);

  return (
    <>
      <header>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        </div>
        <img src="/AdventureCycle.jpg" alt="Adventure Works Cycles Logo" className="logo">
        </img>
      </header>

      <main>
        <h2>Welcome to Our Site!</h2>
        <div className="editor-box">
          <DocumentEditorComponent
              id="container"
              ref={containerRef}
              height={'60vh'}
              serviceUrl="http://localhost:62869/api/documenteditor/"
              isReadOnly={true}
              />
        </div>
      </main>

      <footer>
        © {new Date().getFullYear()} Adventure Works Cycles. All rights reserved.
      </footer>
    </>
  );
}

export default App;

Step 9: Run the application

To see the Syncfusion® DOCX Editor in action with a functioning backend, ensure your Web API service is running, then run your React application.

  • Start your Web API service
  • Run your React application: Open your terminal in the React project directory and run:
npm start

Your browser will open to http://localhost:3000, displaying a fully functional DOCX Editor embedded in the web page in your React application, ready to interact with your server for document processing.

Embed DOC file in web page

You can download a complete working sample of embedding a DOC file in a web page in React from GitHub

Conclusion

I hope you enjoyed learning about how to embed a DOC file in a web page without plugins in React applications using the Syncfusion® DOCX Editor.

You can refer to our React DOCX 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 DOCX Editor example to understand how to create and manipulate data.
​
For current customers, you can check out our components from the License and Downloads page. 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!
Attachments
Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied