RELEASE: What's New in Summer 2024
By Andrey Safonov | 2023 Apr 10
5 min
Tags
tutorial
docx editor
docx
javascript
angular
In this blog, you'll discover how to integrate a ready-made Angular DOCX Editor which enables you to craft and modify DOCX documents directly in your web app and browser without needing server-side components, Microsoft Office, or LibreOffice dependencies.
The Angular DOCX Editor comes packed with numerous sought-after word processing capabilities, making it perfect for elementary DOCX editing, review, and modification scenarios.
The Apryse DOCX Editor leverages client-side processing for each of its various functionalities: The Word file is created and modified within the client’s memory, and you have the ability to open and store DOCX documents from local storage or through a URL, such as an AWS S3 Bucket. Upon saving the document, the generated blob can either be returned to your bucket, saved as an updated version, or just downloaded in native DOCX forma, or converted to PDF.
To understand why both end-users and software developers find embedding direct DOCX editing so valuable, read our launch blog.
Now let’s get this project off the ground: Read on for the step-by-step How-to guide, or watch the How-to video embedded below.
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 Angular 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.
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.
To load an existing DOCX document in your Angular 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,
});
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
Having set up the DOCX editor in your Angular web application, you can now explore ways to modify its appearance and user experience.
Should you encounter issues or face any errors in the process, let’s chat on Discord!
For any inquiries related to pricing, kindly contact our sales team.
Tags
tutorial
docx editor
docx
javascript
angular
Related Products
Share this post
PRODUCTS
Enterprise
Small Business
Popular Content