Section:

Apryse DOCX Editor Basic Setup

Requirements
View Demo
Package: DOCX Editor

Create and edit DOCX without any server-side dependencies. WebViewer enables MS Office file editing without the need for intermediate format conversion or MS Office installations on your server.

A docx file open in DOCX Editor

A docs file open in DOCX Editor

If you have a URL for a document, you can pass it to the WebViewer constructor or loadDocument function to open it.

You can also, alternatively, open a new, blank docx file through the WebViewer constructor.

Get started video

Learn how to enable the Apryse DOCX Editor through the Apryse WebViewer by viewing our video. In this video we build a React project, integrate the Apryse WebViewer with DOCX Editor enabled, then open a new, blank docx file inside the viewer. You can also skip the video and follow the steps below to get started instead.

How to enable DOCX Editor through Apryse WebViewer in a React application

Prerequisites

Before you start:

  • Install Node and npm to use as your run-time environment/package manager.
  • Create a folder for your project.
  • Integrate WebViewer into your project.
  • Open a text editor like Visual Studio Code.
  • Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Enable and open existing docx document

If you have a URL for a document, you can pass it to the WebViewer constructor or loadDocument function to open it.

WebViewer constructor

Load the office document with the WebViewer constructor and it will load with the Viewer.

JavaScript

1WebViewer({
2  ...,
3  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
4  initialMode: 'docx',
5}, document.getElementById('viewer'));

Related Links

Below is an example of how the code might look in an HTML project where WebViewer is integrated and DOCX Editor is enabled:

HTML

index.html

1<html>
2<head>
3  <title>Basic WebViewer</title>
4  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5</head>
6
7<!-- Import WebViewer as a script tag -->
8<script src='/lib/webviewer/webviewer.min.js'></script>
9
10<body>
11  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
12  <script>
13WebViewer({
14  path: 'lib/webviewer', // Path to the 'lib' folder on your server
15  licenseKey: 'YOUR_LICENSE_KEY', //Sign up to get a license key at https://dev.apryse.com
16  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
17  initialMode: 'docx',
18// initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server
19}, document.getElementById('viewer'))
20  .then(instance => {
21    const { documentViewer, annotationManager } = instance.Core;
22
23// Call methods from instance, documentViewer, and annotationManager as needed
24
25// You can also access major namespaces from the instance as follows:
26  // const Tools = instance.Core.Tools;
27 //  const Annotations = instance.Core.Annotations;
28 
29// call methods relating to the loaded document
30    documentViewer.addEventListener('documentLoaded', () => {
31    });
32  })
33</script>
34</body>
35</html>

Load document

Load the office document with the load document method after WebViewer is initialized.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    instance.UI.loadDocument(
4      'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
5      {
6        filename: 'report.docx',
7        initialMode: 'docx',
8      });
9  });

Related Links

Enable and open new, blank docx document

You can open a new, blank docx file through the WebViewer constructor.

WebViewer constructor

Initialize WebViewer constructor without the initialDoc property and the Viewer will load with an empty document, ready to be edited.

JavaScript

1WebViewer({
2  ...,
3  enableOfficeEditing: true,
4}, document.getElementById('viewer'));

Related Links

Sample

This Full sample code shows how to call WebViewer constructor to instantiate and load a document. You can load local/remote files of your choice.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales