Embed Office documents in React

Nutrient Web SDK enables seamless client-side rendering of Word, Excel, and PowerPoint documents directly in modern browsers, eliminating the need for external dependencies or Microsoft Office licenses. With our JavaScript Office document viewer, developers can quickly embed a customizable and responsive Office file viewer into any React-based web application, ensuring smooth integration and enhanced user experience.

Try for free Launch demo

Nutrient SDKs are trusted by world’s most popular applications, including Autodesk, Disney, UBS, Dropbox, IBM, and Lufthansa. Nutrient’s powerful solutions enable seamless integration of PDF editing features into your applications, delivering reliability and efficiency to world-class enterprises.

Why build a React document viewer

Building a React document viewer offers several key advantages, particularly when aiming for a user-friendly and feature-rich experience:

• Unified user experience — Enables the seamless integration of multiple document types within a single, consistent interface, eliminating the need for end users to switch between different applications or plugins.

• Enhanced interactivity and collaboration — Facilitates the implementation of interactive features like annotations, highlighting, commenting, and real-time collaboration, directly within the viewer.

• Improved performance and responsiveness — Efficient rendering capabilities contribute to a smooth and responsive end user experience, even with complex documents.

• Web-based accessibility and security — Provides accessibility from any device with a browser, and when integrated within a secure web application, it can reduce the risk of document leakage compared to local file handling.

• Customization and extensibility — Enables developers to tailor viewer functionality to specific application requirements and add new features as needed.

Key capabilities

• Comprehensive file type support — Open Word (DOCX, DOC, DOTX, and DOCM), Excel (XLSX, XLS, and XLSM), PowerPoint (PPTX, PPT, and PPTM), PDF, PNG, JPEG, JPG, TIFF, TIF (including multipage), and PDF/A (1, 2, 3, 4) files for seamless viewing.

• Client-side document rendering — All rendering and processing happens on the client, with no server dependency required.

• Customizable user interface (UI) — Adjust the interface to match your branding by adding or hiding buttons and controls.

• Responsive design — Enjoy a mobile-friendly document viewer that auto-adjusts to fit all screen sizes.

• Accessibility features — Fully compatible with assistive technologies to ensure inclusive usability.

• Cross-browser compatibility — Works seamlessly across all modern browsers and devices for broader reach.

• Extendable features — Convert documents to PDF to enable annotations, editing, and collaborative workflows.

• Signatures — Securely add electronic and digital signatures to PDF documents. Create, validate, and display digital signatures using our APIs. Enable hand-drawn eSignatures through an intuitive UI.

• Comprehensive annotation support — Access 17 annotation types, such as highlight, text, and ink. Create, edit, and delete annotations through APIs or the UI, and manage them with XFDF or JSON import/export and advanced styles such as cloudy borders.

• Advanced form handling — Fill forms, export or embed data, and create forms with drag and drop or APIs. Enable JavaScript-based validation for automated workflows.

• Thumbnail rendering — Render PDF pages as images for thumbnails, ideal for quick navigation or previews in viewer applications.

• Bookmark and table of contents management — Manage bookmarks and outlines with JavaScript or a customizable UI for hierarchical navigation and context-specific links.

• Printing and downloading control — Restrict printing and downloading with toolbar configuration, text annotations, and password protection for secure document sharing.

Viewing Microsoft Office and image files requires the Office Files and Image Documents components to be enabled in your license.

Getting started

Integrate Nutrient Web SDK into your React project to begin using it. You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN), which Nutrient maintains for its customers. Using the CDN is a quick and easy way to get started.

1. Add the following <script> tag in your index.html. Replace <version> with the most recent release version of the SDK:

<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@<version>/nutrient-viewer.js"></script>

2. You can now use Nutrient Web SDK and reference window.NutrientViewer in your client-side code.

If you need more control and flexibility, consider using a local installation. For detailed instructions, refer to the getting started with React guide.

Opening Office files from a URL

To load a document from a remote URL in standalone mode, pass it in the configuration object passed to NutrientViewer.load():

NutrientViewer.load({
  document: documentUrl
});

For more information, refer to our open MS Office files from a URL guide. For information on alternate methods to open a document (blobs, ArrayBuffer, local storage, SharePoint, and more), refer to our guides for opening a document.

Converting Office documents to PDF

To convert an Office document to a PDF after displaying it in the viewer, follow the steps below.

1. Load the source Office document (optional). To load the document without a user interface visible to the end user, use the headless parameter.

2. Make changes to the document (optional). For example, add annotations.

3. Convert the source document to a PDF with the exportPDF method (optional). Use the outputFormat flag to create a PDF/A document. For more information, see converting PDF to PDF/A.

4. Save the output document. The exportPDF method returns a Promise that resolves to an ArrayBuffer containing the output PDF document. You can use the resulting ArrayBuffer to download or persist the output PDF in storage. For more information on downloading or persisting the exported ArrayBuffer, see the guides on saving a document.

The following example loads an Office document and exports it to a PDF:

NutrientViewer.load({
  container: "#nutrient",
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY"
}).then((instance) => {
  instance.exportPDF();
});

For more information, refer to our convert Office to PDF in React guide.

Customizing the UI

Nutrient Web SDK’s React document viewer enables you to customize every part of the UI. Our robust API for configuring behavior and appearance lets you hide or add buttons, change the theme to match your look and feel, trigger workflows, create overlays, and much more. For more information, refer to our guides for customizing the UI.

Adding zoom functionality

Nutrient Web SDK provides various UI elements and API helpers to manage zooming in and out of documents, as well as to handle zooming automatically. End users can zoom in and out using the toolbar buttons (zoom-in and zoom-out) or keyboard shortcuts:

• Control/Command + + — Zoom in

• Control/Command + - — Zoom out

• Control/Command + 0 — Zoom to auto

• Control + Scroll wheel — Zoom in or out at mouse position

For more information on configuring zoom behavior using an API or disabling zoom for annotations, refer to the zoom options guide.

Adding fullscreen mode

Use the fullscreen API to implement fullscreen mode. The following example demonstrates an approach that works across multiple browsers:

function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

requestFullscreen(nutrientContainer);

FAQs