How to Embed DOCX Editor Into Your Nuxt.js Web App
By Andrey Safonov | 2023 Apr 24
5 min
Tags
tutorial
docx editor
docx
javascript
nuxt.js
In this guide, you will learn how to embed an out-of-the-box Nuxt.js 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 Nuxt.js DOCX Editor includes many popular word processing 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 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 below.
Install WebViewer Component
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 Nuxt.js sample repo or by following our guide.
If you are installing through npm (node package manager), you can simply run:
npm i @pdftron/webviewerWebViewer 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 Nuxt.js App
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 Nuxt.js App
To load an existing DOCX document in your Nuxt.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 Nuxt.js App
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
Now that you have DOCX editor up and running in your Nuxt.js 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.
Tags
tutorial
docx editor
docx
javascript
nuxt.js
Andrey Safonov
Director of Product
Related Products
Share this post
