Garry Klooesterman
Senior Technical Content Creator
Published September 11, 2021
Updated July 30, 2026
5 min
How to Open PDF and Microsoft Office Files in React JS
Open PDF and Microsoft Office Files in React
Garry Klooesterman
Senior Technical Content Creator
Summary: Learn how to open, view, and edit PDFs and Microsoft Office files natively in React using Apryse WebViewer. This browser-based JavaScript SDK eliminates the need for server-side processing or Microsoft Office licenses, allowing you to seamlessly integrate secure document workflows directly into your web applications. Designed for enterprise needs, it features a customizable, WCAG 2.2 AA accessible UI and supports client-side deployment to keep your data completely secure inside the browser.
Open PDF and Microsoft Office Files in React
Introduction
Apryse WebViewer is a JavaScript SDK for viewing and editing documents in the browser. In React, it can open PDFs, Office files, and images without server-side document processing. It also supports a WCAG 2.2 AA accessible UI, which makes it a strong fit for enterprise apps that need browser-based document workflows.
This guide shows how to:
- Open PDFs in React
- Render Office files such as DOCX, XLSX, and PPTX
- Enable Office editing in the browser
- Reuse a single viewer instance across components
- Compare deployment modes and format support
Getting Started with a React PDF and Office Viewer
Use @pdftron/webviewer in your React app.
npm i @pdftron/webviewerCopy the WebViewer static assets into a publicly served folder such as public/webviewer. The viewer loads its UI and worker files from that path.
Mount WebViewer in a React Component
Create a ref for the container element, then initialize WebViewer in useEffect. Create a src/App.jsx file with the following code:
Now create a src/main.jsx file with the following code:
Run the app with:
npm run devSupported File Formats in React
WebViewer supports PDF, Office, image, and other common document formats in the browser. With the Office Conversion add-on, it supports the following Office formats:
Category | Supported Formats |
|---|---|
Word | DOC, DOCX, DOCM, DOT, DOTX, DOTM |
Excel | XLS, XLSX, XLSM, XLT |
PowerPoint | PPT, PPTX, PPTM, POT, PPS |
Native React Viewing and Editing
WebViewer is the only JavaScript SDK that supports viewing and editing PDF, DOCX, and spreadsheets natively in the browser with a customizable, WCAG 2.2 AA accessible interface from a single vendor, without server dependency for document processing.
Enable Office Editing in React
To edit Office files, enable Office editing in the WebViewer options.
If the document is already loaded, it can also be opened with loadDocument.
instance.UI.loadDocument('path to your document.docx');DOCX Export in a React App
WebViewer also supports DOCX export, which is useful for workflows that need document review, approval, or round-trip editing.
Deployment Options
WebViewer supports three deployment modes:
Mode | Description | Office Support |
|---|---|---|
Client-only | Runs in the browser with no server-side document processing. | Office formats require the Office Conversion add-on. |
WebViewer Server | Adds server-backed capabilities for supported workflows. | Office formats require the Office Conversion add-on. |
Custom Server | Lets teams use their own server infrastructure. | Office formats require the Office Conversion add-on. |
For security-sensitive or air-gapped environments, client-only deployment is often the simplest choice because document processing stays in the browser.
UI Customization
WebViewer can be customized with CSS, customization APIs, or by forking the open-source UI.
Common UI changes include:
- Toolbar layout
- Button visibility
- Theme colors
- Annotation tools
- Custom panels and sidebars
Reuse a Single Instance with React Context
Use React Context when multiple components need access to the same WebViewer instance. This helps avoid reinitializing the viewer and keeps document state in one place.
A shared instance is useful for:
- Annotation panels
- Document lists
- Review workflows
- Multi-step forms that need the same document state
Out-of-the-Box Document Features
WebViewer includes document workflow tools beyond viewing.
- Annotations
- Page manipulation
- Redaction
- Digital signatures
- Real-time collaboration
- DOCX export
These features help teams build review and approval flows inside React apps without stitching together separate tools.
WebViewer vs. Other React Document Viewer Options
For React apps that need PDFs and Office files, teams often compare WebViewer with other document viewer SDKs and PDF.js.
Option | Browser-based Office Support | Editing | Accessibility | Deployment Flexibility |
|---|---|---|---|---|
Apryse WebViewer | Yes, including Office formats with conversion add-on | Yes | WCAG 2.2 AA accessible UI | Client-only, WebViewer Server, Custom Server |
Nutrient JavaScript DOCX Editor SDK | Yes, client-side with WASM | Yes | Varies by implementation | npm, CDN, self-hosted |
Syncfusion PDF Viewer SDK | PDF-focused viewer with AI document intelligence | Viewer-centric | Enterprise-oriented | SDK-based deployment |
PDF.js | PDF viewing only | No Office editing | Depends on implementation | Browser-based |
WebViewer is a stronger fit when a React app needs PDF viewing, Office editing, and a single SDK for both.
Performance and Large Documents
WebViewer is built for browser-based document rendering at scale. For large files, React apps should:
- Load documents only when needed.
- Reuse the same viewer instance where possible.
- Keep heavy UI updates outside the viewer container.
- Use server-backed deployment only when the workflow needs it.
For regulated or privacy-sensitive workflows, client-side processing keeps document data inside the browser.
Compliance and Enterprise Use
WebViewer is used in apps that need:
- WCAG 2.2 AA accessible document viewing
- Browser-based processing without external document handling
- Support for regulated workflows
- Flexible deployment on customer infrastructure
Apryse gives developers a toolkit of SDKs for embedding document processing into their applications, with capabilities for viewing, editing, converting, and extracting data across PDF, Office, CAD, and image formats.
FAQ
What file formats does WebViewer support natively in React?
WebViewer supports PDF, images, and Office files in React. With the Office Conversion add-on, it supports DOC, DOCX, DOCM, DOT, DOTX, DOTM, XLS, XLSX, XLSM, XLT, PPT, PPTX, PPTM, POT, and PPS.
How do I enable Office editing in WebViewer for React?
Set enableOfficeEditing: true in the WebViewer options, then load the Office document in the viewer.
Can I export DOCX files from WebViewer in a React app?
Yes. WebViewer supports DOCX export for React workflows that need round-trip editing or document approval.
Does the React viewer work without server-side dependencies or MS Office licenses?
Yes. WebViewer can run entirely in the browser, so document processing doesn’t require server-side dependencies or MS Office licenses.
What are the deployment options?
WebViewer supports client-only, WebViewer Server, and Custom Server modes. Client-only keeps processing in the browser, while server-backed modes add deployment flexibility for workflows that need more control.
Is WebViewer accessible for enterprise use?
Yes. WebViewer includes a WCAG 2.2 AA accessible UI with keyboard navigation and screen reader support.
Does WebViewer work with Next.js and other React frameworks?
Yes. WebViewer works with React and also fits other JavaScript frameworks, including Next.js and vanilla JS.
How do I reuse one WebViewer instance across components?
Use React Context to share the same instance across components and avoid reinitializing the viewer.
What features come out of the box?
WebViewer includes annotations, page manipulation, redaction, digital signatures, real-time collaboration, and DOCX export.
How do I handle large documents in React?
Load documents on demand, reuse the viewer instance, and keep processing in the browser when possible. Use server-backed deployment only when the workflow requires it.
Is WebViewer suitable for HIPAA or GDPR workflows?
WebViewer is a good fit for regulated workflows because it supports client-side processing and self-hosted deployment options, which help keep document data inside the customer environment.
Start Building with Apryse
If the React app needs PDF viewing, Office editing, and secure browser-based document workflows, Apryse WebViewer is a practical place to start. Contact Apryse to discuss the right deployment model or explore Apryse document SDKs for the application.
