Install the required packages
To install the package, type one of the following commands based on your package manager
npm install @xmldom/xmldom pizzip
yarn add @xmldom/xmldom pizzip
.docx files in a React component
The .docx file can be read in a react component using the following steps.
- Read the
.docxfile from local using the
- Add the file object to a
- The contents of the
.docxfiles will be compressed xml data. So, we have to decompress the file using the
pizzippackage. The decompressed data will be of xml format.
- Once decompressed xml is archived, we have to parse the xml data to json using the
- Now, extract the json data as array of paragraphs.
The full example is available below:
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.