How to Embed DOCX Editor Into Your React Web App
By Andrey Safonov | 2023 Mar 31
5 min
Tags
tutorial
docx editor
docx
javascript
react
Looking to add robust DOCX editing to your native application without dependencies? The React DOCX Editor makes it easy with no Microsoft Office, LibreOffice, or server-side setup required.
In this guide, you'll learn how to quickly implement the out-of-the-box React DOCX Editor and enable your users to edit, manipulate, and revise DOCX files right in their browser.
The editor comes equipped with commonly used word processing tools, providing a flexible solution for DOCX creation, editing, revising and formatting needs:
- Create entirely new DOCX documents.
- Open and edit existing DOCX documents.
- Change formatting of text (bold, italics, underline).
- Alter 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.
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
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 React application, you can either do so by cloning our React sample repo on Github, 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 React App
Once you have WebViewer up and running, go to the constructor of WebViewerand 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 React App
To load an existing DOCX document in your React 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 React 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
With the DOCX editor now integrated into your JavaScript web app, you're ready to unlock powerful document editing right in the browser. Now you can explore how to customize the editor's styling and interface to match your app's look and feel. The possibilities are endless for enhancing your app's functionality and user experience!
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
react
Andrey Safonov
Director of Product
Related Products
Share this post
