PDFTron is now Apryse. Same great products, new name.

How to Open DOCX in a Vue Web App

By Andrey Safonov | 2022 Jul 11

Sanity Image
Read time

2 min

Looking for a Vue DOCX web app? This blog explains how to view Microsoft Office documents in a Vue file viewer app using Apryse’s WebViewer. It also includes Microsoft Word, Excel, and PowerPoint formats and legacy formats such as DOC, XLS, and PPT. 

Using just a few lines of code, you can display files client-side, without server dependencies, Microsoft Office licenses, or third-party software. Apryse’s WebViewer directly converts DOCX, XLSX, and PPTX files using JavaScript and renders them to view dynamically.

To see this in action, use our office demo to test WebViewer with your files.

Check out the Vue doc viewer demo on GitHub, and visit the documentation for get-started steps and further information on additional functionality. 

How to View DOCX in a Vue Web App

Step 1 - Get Started

Once the Vue doc viewer example is running, pass the URL, blob, file path, or arrayBuffer to initialDoc property in WebViewer constructor. 

Code Example for a Vue Document Viewer

WebViewer({
  ...,
  initialDoc: 'https://myserver.com/myfile.docx',
}, document.getElementById('viewer'));

Or use the same parameters to call loadDocument.

WebViewer(...)
  .then(instance => {
    instance.UI.loadDocument('https://myserver.com/myfile.docx', { filename: 'myfile.docx' });
  });

Step 2 - Run the App

Now, run the app via npm start.

To view the npm Vue file viewer xlsx app, go to http://localhost:3000/. The app automatically reloads if any source files change.

A Customizable UI

To configure the UI, WebViewer uses a rich set of APIs. View the UI customization guide to see the possibilities, or create your own UI by referencing our open-source UI code.

Additional Functionality

WebViewer supports more than viewing Office documents. It also offers annotation, mail merge on XLSX templates, text editing, page manipulation, redaction, form filling and creation, to name a few.

In addition, WebViewer supports formats such as PDF, images, videos, and CAD documents. 

Conclusion

In this tutorial, you learned how to add MS Office document viewing and collaboration to your native npm Vue file browser app with Apryse’s WebViewer, a JavaScript-based MS Office SDK. The source code for this blog post is available on our GitHub page.

You can also see other capabilities on our showcase.

If you have any questions about Apryse’s SDK or WebViewer, please get in touch.

Sanity Image

Andrey Safonov

Share this post

email
linkedIn
twitter