Read .docx files in React.js

This article discusses how to read a .docx file in React applications using @xmldom/xmldom and pizzip.

Install the required packages

To install the package, type one of the following commands based on your package manager

For npm:

npm install @xmldom/xmldom pizzip

For yarn:

yarn add @xmldom/xmldom pizzip

Read .docx files in a React component

The .docx file can be read in a react component using the following steps.

1. Read the .docx file from local using the <input type="file"/> element.
2. Add the file object to a FileReader instance.
3. The contents of the .docx files will be compressed xml data. So, we have to decompress the file using the pizzip package. The decompressed data will be of xml format.
4. Once decompressed xml is archived, we have to parse the xml data to json using the DOMParser from @xmldom/xmldom.
5. Now, extract the json data as array of paragraphs.

The full example is available below:

Be Amazed!

Hooray! Our React component has effectively parsed a .docx file. The paragraph state variable shall contain an array of strings, where each element represents a paragraph.

Say Hi, It’s free at @matheswaaran_S or https://matheswaaran.com