How to Implement a Ready-Made DOCX Editor Into Any Next.js App

By Andrey Safonov | 2023 Apr 29

5 min

Install WebViewer Component

Copied to clipboard

DOCX Editor is built on top of Apryse’sWebViewer. WebViewer offers viewing and editing not just of DOCX documents but also PDFs, images, CAD, video, and many other formats.

To install WebViewer in your Angular application, you can either do so by cloning our GitHub Next.js sample repo or by following our guide.

If you are installing through npm (node package manager), you can simply run:

npm i @pdftron/webviewer

WebViewer comes with a free trial for 7 days. If you would like to extend the trial duration, you can generate a free trial key after signing up at https://dev.apryse.com.

In trial mode, all features are available except a watermark on output documents.

Enable DOCX Editing Functionality in Your Next.js App

Copied to clipboard

Once you have WebViewer up and running, go to the constructor of WebViewer and pass the option to enable Office editing:

WebViewer({ 
	enableOfficeEditing: true, 

}, viewerElement)

Once you have that, restart your app and you should see DOCX editor.

Load a DOCX Document in Your Next.js App

Copied to clipboard

To load an existing DOCX document in your Next.js web app, you can do so either through initial document property:

WebViewer({ 

  initialDoc: 'https://myserver.com/myfile.docx', 

  enableOfficeEditing: true, 

}, document.getElementById('viewer'));

or through load document API:

instance.UI.loadDocument( 

      'https://myserver.com/myfile.docx', 

      { 

        filename: 'myfile.docx', 

        enableOfficeEditing: true, 

      });

Save a DOCX Document in Your Next.js App

Copied to clipboard

To save the edited or newly created DOCX, use the getFileData API:

const doc = documentViewer.getDocument(); 
const data = await doc.getFileData(); 
const arr = new Uint8Array(data); 
const blob = new Blob([arr], { type: 'application/pdf' }); 
// Add code for handling Blob here