COMING SOON: Fall 2024 Release
By Andrey Safonov | 2024 Oct 01
3 min
Tags
react
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. 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.
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.
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.
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' });
});
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.
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.
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]
Tags
react
office
view
Share this post
PRODUCTS
Enterprise
Small Business
Popular Content