Unlock the Power of Direct PDF Editing with WebViewer 10.7

How to Embed DOCX Editor Into Your Vue Web App

By Andrey Safonov | 2023 Apr 12

Sanity Image
Read time

5 min

In this guide, you will learn how to embed an out-of-the-box Vue DOCX Editor that allows creating and editing DOCX documents natively in your web application and browser without any server-side, Microsoft Office, or LibreOffice dependencies.

The Vue DOCX Editor includes many popular wordprocessing features, making it ideal for basic DOCX editing, manipulation, and revision use cases:

  • Create new DOCX documents.
  • Open and edit existing DOCX documents.
  • Change text styling (bold, italics, underline).
  • Change fonts, font size, and set headings.
  • Align, justify, and control line spacing.
  • Insert bullets or numbered lists.

Apryse DOCX Editor takes advantage of client-side operations at each step of the process: The Word document is edited within the memory of the client, and you can load and save DOCX documents from local file storage or via URL, such as from an AWS S3 Bucket. When you then save the document, the resulting blob can be put back into your bucket, uploaded as a new version, downloaded as the native DOCX, or as a PDF document.

To learn more about why users and software developers alike see so much value in embedding native DOCX editing, head over to read our launch blog.

Learn more about Apryse's PDF and DOCX editor functionality.

Now let’s get started:
Read on for the step-by-step How-to guide, and/or watch the How-to video below embedded below.

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 Vue 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 Vue 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:

	enableOfficeEditing: true, 

}, viewerElement)

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

Load a DOCX Document in Your Vue App

Copied to clipboard

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


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

  enableOfficeEditing: true, 

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

or through load document API:




        filename: 'myfile.docx', 

        enableOfficeEditing: true, 


Save a DOCX Document in Your Vue 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 

Next Steps

Copied to clipboard

Now that you have DOCX editor up and running in your Vue web application, you can check out how to customize the look and feel of DOCX editor.

If you had trouble with any of the steps or ran into an error, you can also chat with us on Discord.

If you would like to inquire about pricing, please reach out to our sales team.

Sanity Image

Andrey Safonov

Director of Product

LinkedIn link

Share this post