JavaScript API to Handle Word Documents with React

Open Source JavaScript library to create, modify and convert Word files, add paragraphs and a list of dots to existing documents & so on.

The redocx is a very useful open source library that enables software developers to create and manage word documents with react using JavaScript commands. The library provides a very powerful set of components that can be used to render a React element to a Word document object with ease. You need to provide the file name and path for the document. The developers can also render the documents straight to a memory-mapped stream.

The redocx library is very easy to handle and has included very powerful features related to Word documents creation and rendering, such as generating new documents from the scratch, adding a paragraph to existing documents, adding a list of dots, adding a list of numbers to word document, insert header/footer to word file, draw a horizontal or vertical line, insert a table, add an image to the place of your choice and much more.

Previous Next

Getting Started with redocx

The recommended way to install redocx library is via npm. Please use the following command for a smooth installation

Install redocx via npm

 npm install --save react redocx 

Word Documents Generation via JavaScript API

Microsoft word is a leading word processing program mainly used for creating documents that are used across the globe such as letters, brochures, quizzes or tests, and so on. The redocx library enables software developers to generate new Word documents using Java. It is also very easy to modify the existing document using some simple commands. You can easily add new paragraphs, images, tables, lists, and much more.

Render Text to Word Document via JavaScript API

import React from 'react'
import { render, Document, Text } from 'redocx'

class App extends React.Component {
  render() {
    return (
      
        Hello World
      
    )
  }
}

render(, `${__dirname}/example.docx`)

Tables Handling in Word Docs

Tables are the most important formatting element that helps Word processing users to organize their content in a better way inside their word documents. The open source redocx library has included complete support for inserting as well as managing tables using JavaScript commands. It has included several important functions for handling tables, such as setting the width of each column, table size, aligning content, setting borders size, inserting rows and columns, using table heading, and much more.

How to Manage Tables inside JavaScript Apps

import React, { Component } from 'react';
import { Table, Document } from '../src/';

const tableStyle = {
	tableColWidth: 4261, // Width of each column
	tableSize: 24, // Table size
	tableColor: 'red', // Content color
	tableAlign: 'center', // Align content
	borders: true, // Borders
};

const HEADERS = [
  {
    value: 'Phone',
    styles: {
      color: 'red',
      bold: true,
      size: 10
    }
  },
  {
    value: 'Capacity',
    styles: {
      color: 'blue',
      bold: true,
      size: 10
    }
  }
]

const DATA = [
  ['iPhone 7', '128GB'],
  ['iPhone 5SE', '64GB']
]

export default TableComponent;

Insert Header and Footer in MS Word File

Headers and footers are very handy parts of a word document that can be used to organize longer documents by holding the information that users want to appear on every page of a Word document such as author name, the document title, or page numbers, etc. The open source redocx library has provided complete functionality for inserting as well as handling custom headers and footers inside a Word document with ease. It is also possible to set multiple headers and footers for different sections of word documents.

Manage Header in Word Documents via JavaScript API

import React, { Component } from 'react';
import { Header, Document } from '../src/';

class HeaderComponent extends Component {
  render () {
    return (
      
        
Heading
); } } export default HeaderComponent

Image Handling inside a Word File

Software developers and programmers can easily insert and modify images to the places of their choice inside MS Word documents using the open source redocx library. You need to provide the image name and the complete address. The library has included important functionality for aligning your images, setting the width and height of the image, applying styles to an image, and so on.

How Manage Images in Word Files via JavaScript API

import React, { Component } from 'react';
import { Image, Document } from '../src/';

class ImageComponent extends Component {
  render () {
    return (
      // image file path will be provided here 
      
  }
}
 English