Build a React.js Word DOCX Viewer in Browser Using docx-preview Library in Javascript

App.jsx

import React, { useRef, useState } from 'react'
import { Col, Container, Form, Row } from 'react-bootstrap'
import "bootstrap/dist/css/bootstrap.min.css"

import { renderAsync } from 'docx-preview'

function App() {

  const [error,setError] = useState("")

  const viewerRef = useRef(null)

  const handleFileChange = async (e) => {
    // read the docx file which is selected
    const file = e.target.files[0]

    if (!file || file.type !== "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
      setError("Please upload a valid .docx file.");
      return;
    }

    setError("")

    const arrayBuffer = await file.arrayBuffer()

    renderAsync(arrayBuffer,viewerRef.current).catch(() => {
      setError("An error occured rendering the document")
    })

  }

  return (
    <Container className='mt-4'>
      <Row className='mb-3'>
        <Col>
          <h1>Word Document Viewer</h1>
        </Col>
      </Row>
      <Row className='mb-3'>
        <Col>
          <Form>
            <Form.Group>
              <Form.Label>Upload a Word Document(.docx)</Form.Label>
              <Form.Control
              type='file'
              accept='.docx'
              onChange={handleFileChange}
              />
            </Form.Group>
          </Form>
        </Col>
      </Row>

      <Row>
        <Col>
          <div ref={viewerRef}
          style={{
            border:"1px solid #ccc",
            padding:"16px",
            height:"500px",
            overflow:"scroll"
          }}
          >
          {/* here the docx file will show */}
          </div>
        </Col>
      </Row>
    </Container>
  )
}

export default App

import React, { useRef, useState } from 'react'

import { Col, Container, Form, Row } from 'react-bootstrap'

import "bootstrap/dist/css/bootstrap.min.css"

import { renderAsync } from 'docx-preview'

function App() {

const [error,setError] = useState("")

const viewerRef = useRef(null)

const handleFileChange = async (e) => {

// read the docx file which is selected

const file = e.target.files[0]

if (!file || file.type !== "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {

setError("Please upload a valid .docx file.");

return;

}

setError("")

const arrayBuffer = await file.arrayBuffer()

renderAsync(arrayBuffer,viewerRef.current).catch(() => {

setError("An error occured rendering the document")

})

}

return (

<Col>

<h1>Word Document Viewer</h1>

</Col>

</Row>

<Col>

<Form>

<Form.Group>

<Form.Label>Upload a Word Document(.docx)</Form.Label>

<Form.Control

type='file'

accept='.docx'

onChange={handleFileChange}

</Form.Group>

</Form>

</Col>

</Row>

<Row>

<Col>

<div ref={viewerRef}

style={{

border:"1px solid #ccc",

padding:"16px",

height:"500px",

overflow:"scroll"

}}

{/* here the docx file will show */}

</div>

</Col>

</Row>

</Container>

)

}

export default App

Build a React.js Word DOCX Viewer in Browser Using docx-preview Library in Javascript

Comments

Leave a Reply Cancel reply

Archives