How to Open DOCX in a Vue Web App

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 now, demo WebViewer with showcase using your own Office files.

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

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

Or use the same parameters to call loadDocument.

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.

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.

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. 

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 the WebViewer showcase.

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