Open Word documents in the browser with JavaScript

Open Word files in the browser using JavaScript and Nutrient. Load DOC or DOCX files from a URL, blob, ArrayBuffer, localStorage, or Base64 data.

Opening Office documents in the browser

Nutrient Web SDK lets you open Office documents in a web browser without you or your users needing any MS Office software, MS Office licenses, or third-party open source software. The technology works by first converting an Office document to PDF client-side using our Office-to-PDF conversion engine and then opening the file directly in the browser.

For both manual and npm installations, it’s important to note that the assets must be copied to a public folder. Make sure your server has the Content-Type: application/wasm MIME type set.

To serve the files, you need to use an npm package like serve(opens in a new tab) as a simple HTTP server.

Additional capabilities with Nutrient’s viewer

Nutrient’s standalone viewer supports annotating, form filling, editing, and signing Office files in the browser:

• Text editing — Edit text directly in the displayed Office document
• Page manipulation — Add, remove, or rearrange pages
• Annotations — Add text highlights, comments, or stamps
• Signatures — Draw, type, or upload a signature

Requirements to get started

To get started, you’ll need:

• The latest stable version of Node.js(opens in a new tab).
• A package manager compatible with npm(opens in a new tab). This guide contains usage examples for the npm client(opens in a new tab) (installed with Node.js by default).

Adding Nutrient to your project

1. Install the @nutrient-sdk/viewer package from npm. If you prefer, you can also download Nutrient Web SDK manually:

npm install @nutrient-sdk/viewer

2. For Nutrient Web SDK to work, it’s necessary to copy the directory containing all the required library files (artifacts) to the assets folder. Use the following command to do this:

cp -R ./node_modules/@nutrient-sdk/viewer/dist/ ./assets/

Make sure your assets directory contains the nutrient-viewer.js file and a nutrient-viewer-lib directory with the library assets.

Integrating into your project

1. Add an empty <div> element with a defined width and height to where Nutrient will be mounted:

<div id="nutrient-viewer" style="width:100%; height:100vh;"></div>

2. Include nutrient-viewer.js in your HTML page:

<script src="assets/nutrient-viewer.js"></script>

3. Initialize Nutrient Web SDK in JavaScript by calling the load() method.

This method takes a configuration object as its parameter. The configuration object specifies the location of the document on the page, the path to the source document, and the optional license key:

<script>
  NutrientViewer.load({
    container: '#nutrient-viewer',
    document: 'document.docx', // Add the path to your document here.
    licenseKey: 'YOUR_LICENSE_KEY', // Remove this line if you're using the free trial.
  });
</script>

Opening a Word document from a remote URL

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

NutrientViewer.load({
  document: documentUrl, // Pass the URL to your document here.
});

Opening a Word document from a blob

If you have a DOC file available as a blob, you can generate an object URL for it and pass it as the document:

const documentBlobObjectUrl = URL.createObjectURL(blob);

NutrientViewer.load({
  document: documentBlobObjectUrl,
}).then((instance) => {
  // Make sure to revoke the object URL once it's no longer needed to avoid unnecessary resource retention by the browser.
  URL.revokeObjectURL(documentBlobObjectUrl);
});

Define initial viewer settings using the initialViewState property. For example, to open on page 8 with the thumbnails sidebar visible, do the following:

const documentBlobObjectUrl = URL.createObjectURL(blob);

NutrientViewer.load({
  document: documentBlobObjectUrl,
  initialViewState: new NutrientViewer.ViewState({
    pageIndex: 8,
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS,
  }),
}).then((instance) => {
  // Remember to revoke the object URL to release unnecessary resources held by the browser.
  URL.revokeObjectURL(documentBlobObjectUrl);
});

Opening a Word document from an ArrayBuffer

Pass an ArrayBuffer directly to the document property:

NutrientViewer.load({
  document: myDocumentArrayBuffer,
});

Nutrient handles rendering and display automatically.

Opening a Word document from localStorage

To persist Word documents in the browser, encode them as Base64 and save to localStorage. Since localStorage only accepts strings, Base64 encoding is required.

First, export the document as an ArrayBuffer. Then encode it as a Base64 string:

const myDocumentArrayBuffer = await instance.exportPDF();
let base64EncodedDocument = '';
const len = myDocumentArrayBuffer.byteLength;
for (let i = 0; i < len; i++) {
  base64EncodedDocument += String.fromCharCode(
    myDocumentArrayBuffer[i],
  );
}
window.localStorage.setItem('document', base64EncodedDocument);

To load this document later, retrieve the Base64 string from local storage and pass it as a data URL in the configuration object for NutrientViewer.load():

const base64EncodedDocument = window.localStorage.getItem('document');
NutrientViewer.load({
  // `base64Decode` is a user function that decodes a Base64 string into an `ArrayBuffer`.
  document: `data:application/pdf;base64,${base64EncodedDocument}`,
});

Opening a Word document from Base64 data

If you need to open a Word document encoded as Base64 data, you can pass it as a data URL:

NutrientViewer.load({
  document: `data:application/pdf;base64,${base64EncodedDocument}`,
});

The Base64-encoded string can be constructed from a file in any of the different supported input formats.

You can also set the initial viewer settings in the same configuration object using the initialViewState property. For example, to open the document on page 8 with the thumbnails sidebar visible, do the following:

NutrientViewer.load({
  document: `data:application/pdf;base64,${base64EncodedDocument}`,
  initialViewState: new NutrientViewer.ViewState({
    pageIndex: 8,
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS,
  }),
});

Serving your website

You’ll use the npm serve package to serve your project.

1. Install the serve package:

npm install --global serve

2. Serve the contents of the current directory:

serve -l 8080 .

3. Navigate to http://localhost:8080 to view the website.

A note about fonts

When you convert an Office document with custom fonts to a PDF, Nutrient Web SDK might not have access to these fonts due to licensing constraints. In this case, Nutrient typically replaces unavailable fonts with their equivalents — like Arial with Noto.

Adding more capabilities

Customize your viewer with these guides:

• Instant synchronization
• Document assembly
• Page manipulation
• Editor
• Forms
• Signatures
• Redaction
• Document security

Conclusion

Nutrient supports loading Word files from multiple sources — URLs, blobs, ArrayBuffers, localStorage, and Base64 data. Customize viewer settings like the initial page and sidebar visibility to fit your needs.

See our web viewer guide for framework integration with Angular, Vue.js, and React.js. Start a free trial or launch the demo.

Related reading

• How to build a PowerPoint viewer in JavaScript — Display PPT/PPTX files in the browser with Nutrient
• Open Excel files in the browser using JavaScript — Handle XLS and XLSX files without MS Office
• How to build a React Word viewer — Display DOC/DOCX files in React applications
• Top five document viewers for developers — Compare DOCX and PDF viewer libraries side by side

FAQ