How to View DOCX File in a React Web App

By Andrey Safonov | 2024 Oct 01

3 min

Tags

react

pdf

office

view

Looking for a React DOCX viewer? This blog will reveal how to view Microsoft Office documents in a React file viewer app using Apryse’s WebViewer. This includes not only Microsoft Word, Excel, and PowerPoint formats, but also the legacy formats such as DOC, XLS, and PPT.

In a few lines of code, we'll show how you can view files client-side in the browser, with no server dependencies and without needing Microsoft Office licenses or third-party software. Apryse’s WebViewer directly converts DOCX, XLSX, and PPTX files using JavaScript and renders them for viewing dynamically.

A DOCX file opened in Word in Viewing mode

A DOCX file opened in Word. You can see that it is a Protected View.

Try our office demo to test WebViewer with your files.

While this article is about viewing DOCX files, it is also possible to edit DOCX files directly within the browser.

Additional Functionality

WebViewer does much more than just working with Office files, it also supports formats like PDF, images, videos, and CAD documents.

When working with PDFs it offers the ability to add annotations, edit the PDF content, manipulate pages, and supports redaction, form filling and creation, and much more. If that wasn't enough it also allows you to merge data with DOCX templates to generate PDF or DOCX documents.

Learn more about PDF editing and manipulation using React.

How to View DOCX File in a React Web App

Copied to clipboard

Step 1 - Get Started

Check out the full React doc viewer demo on our GitHub, and visit the documentation for the get-started with WebViewer steps.

Straight out of the box, the sample is set up to open a PDF, but if you pass the URL, blob, file path, or arrayBuffer for a DOCX file to the initialDoc property in the WebViewer constructor, then that Word document will be opened instead. In fact, it doesn't stop there, since you can use the same mechanism to open other Office file types.

Code Example for React Document Viewer

WebViewer({
  ...,
  initialDoc: 'https://myserver.com/myfile.docx',
}, document.getElementById('viewer'));

You can also call loadDocument with the same parameters.

WebViewer(...)
  .then(instance => {
    instance.UI.loadDocument('https://myserver.com/myfile.docx', { filename: 'myfile.docx' });
  });

Step 2 - Run the App

If you haven't alrady done so then you can now run the app via 'npm start'.

To view the npm React file viewer docx app, navigate to http://localhost:3000/. The app automatically reloads if you change any of the source files.

Awesome, we have our DOCX file visible in the browser.

Our DOCX file now shown in WebViewer, running in the browser.

A Customizable UI

Copied to clipboard

If you want to configure the UI, WebViewer comes with a rich set of APIs. To get an idea of the vast array of possibilities, check out the UI customization guide. You can also create your own UI by referencing our open-source UI code.

Explore even more functionality. Learn about PDF layers in WebViewer.

Conclusion

Copied to clipboard

Adding Office document viewing and collaboration to your native npm React file browser app is straightforward with Apryse’s WebViewer, a JavaScript-based MS Office SDK. Find the source code for this blog post on our GitHub.

To demo WebViewer capabilities right now, please visit the showcase.

If you have any questions about Apryse’s SDK or WebViewer, please get in touch via our Discord channel.

[This article was originally released in June 2022]