Updated 18th January 2021

Introduction

Word documents are everywhere and are used for countless tasks so you may have a requirement to support their generation from within your web application or webpage, this could include downloading a C.V from your personal site to the generation of a report based on data from within your web application that can be printed out or emailed by your client.

Goals

Create and save a Word document using only client-side vanilla/plain JavaScript.

Prerequisites

In order to complete this example you should have some basic knowledge of HTML and JavaScript.

Step 1 – Setup project

In order to concentrate on the job in hand and to get up and running as quickly as possible we are going to use CodeSandbox and their vanilla starter project.

A new CodeSandbox project can be created by opening the following link vanilla JavaScript project.

Step 2 – Install dependencies needed to create a Word document

With the project setup we can now install the two modules/dependencies needed to successfully create and save a Word document. The first package (docx) allows you to build your Word document and the second package (file-saver) gives the ability to save the document locally.

Add the two packages using the dependencies section.

Step 3 – Add a button to create our Word document

Before we start writing the code required to generate our Word documents lets add a button to the index.html file. We can then use this button to fire off the actions needed to generate the Word document.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <button id="generate">Generate Word Document</button>
    <script src="src/index.js"></script>
  </body>
</html>

Step 4 – Create a blank Word document

From now one we will be working solely within the index.js JavaScript file, lets start by deleting everything that is currently there as this is not need.

All we will need to create a blank word document is the Document and Packer features from the docx module and the saveAs feature from file-saver module.

import { Document, Packer } from 'docx'
import { saveAs } from 'file-saver'

Next add an event listener that is listening for clicks on the button we created in Step 3.

// Listen for clicks on Generate Word Document button
document.getElementById('generate').addEventListener(
  'click',
  function (event) {
    generateWordDocument(event)
  },
  false
)

Once the event listener is triggered we will call a function that will create a new instance of Document from the docx module and send this instance to a saveDocumentToFile function.

function generateWordDocument(event) {
  event.preventDefault()
  // Create a new instance of Document for the docx module
  let doc = new Document({ sections: [] })
  // Call saveDocumentToFile with the document instance and a filename
  saveDocumentToFile(doc, 'New Document.docx')
}

The saveDocumentToFile function creates a new instance of Packer from the docx modules, Packers in docx are used to turn your JavaScript code into a .docx file. We then send our document instance to Packers toBlob function which in turn converts our instance of Document into a Blob object, a mimeType is added to the Blob and finally the Blob is sent to saveAs feature of the file-saver module which will create the file and prompt you to save or open.

function saveDocumentToFile(doc, fileName) {
  // Create a mime type that will associate the new file with Microsoft Word
  const mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  // Create a Blob object from Packer containing the Document instance and the mimeType
  Packer.toBlob(doc).then((blob) => {
    const docblob = blob.slice(0, blob.size, mimeType)
    // Save the file using saveAs from the file-saver package
    saveAs(docblob, fileName)
  })
}

Clicking the ‘Generate Word Document’ button will now create and save a blank Word document.

Step 5 – Create content of the Word document

We can now start adding some content to the Word document. We will simply add a title, subtitle, two headings and a long paragraph as this will make it easier to understand once we come to start styling the document.

Import Paragragh from docx.

import { Document, Packer, Paragraph } from 'docx'

Add the new paragraph to the document.

function generateWordDocument(event) {
  event.preventDefault()
  let doc = new Document({
    sections: [
      {
        children: [
          new Paragraph({ text: 'Title' }),
          new Paragraph({ text: 'Subtitle' }),
          new Paragraph({ text: 'Heading 1' }),
          new Paragraph({ text: 'Subtitle' }),
          new Paragraph({ text: 'Heading 2' }),
          new Paragraph({
            text:
              'Aliquam gravida quam sapien, quis dapibus eros malesuada vel. Praesent tempor aliquam iaculis. Nam ut neque ex. Curabitur pretium laoreet nunc, ut ornare augue aliquet sed. Pellentesque laoreet sem risus. Cras sodales libero convallis, convallis ex sed, ultrices neque. Sed quis ullamcorper mi. Ut a leo consectetur, scelerisque nibh sit amet, egestas mauris. Donec augue sapien, vestibulum in urna et, cursus feugiat enim. Ut sit amet placerat quam, id tincidunt nulla. Cras et lorem nibh. Suspendisse posuere orci nec ligula mattis vestibulum. Suspendisse in vestibulum urna, non imperdiet enim. Vestibulum vel dolor eget neque iaculis ultrices.',
          }),
        ],
      },
    ],
  })
  saveDocumentToFile(doc, 'New Document.docx')
}

Step 6 – Style the Word document

Now that we have some content we can look at styling the document using the built in styles of Word.

Firstly we will need to import HeadingStyles from docx

import { Document, Packer, Paragraph, HeadingLevel } from 'docx'

Then we can apply the Heading level to each paragraph.

function generateWordDocument(event) {
  event.preventDefault()
  // Create new instance of Document for the docx module
  let doc = new Document({
    sections: [
      {
        children: [
          new Paragraph({ text: "Title", heading: HeadingLevel.TITLE }),
          new Paragraph({ text: "Heading 1", heading: HeadingLevel.HEADING_1 }),
          new Paragraph({ text: "Heading 2", heading: HeadingLevel.HEADING_2 }),
          new Paragraph({
            text:
              "Aliquam gravida quam sapien, quis dapibus eros malesuada vel. Praesent tempor aliquam iaculis. Nam ut neque ex. Curabitur pretium laoreet nunc, ut ornare augue aliquet sed. Pellentesque laoreet sem risus. Cras sodales libero convallis, convallis ex sed, ultrices neque. Sed quis ullamcorper mi. Ut a leo consectetur, scelerisque nibh sit amet, egestas mauris. Donec augue sapien, vestibulum in urna et, cursus feugiat enim. Ut sit amet placerat quam, id tincidunt nulla. Cras et lorem nibh. Suspendisse posuere orci nec ligula mattis vestibulum. Suspendisse in vestibulum urna, non imperdiet enim. Vestibulum vel dolor eget neque iaculis ultrices."
          })
        ]
      }
    ]
  });
  ...
  ...
  // Call saveDocumentToFile withe the document instance and a filename
  saveDocumentToFile(doc, "New Document.docx")
}

Clicking the ‘Generate Word Document’ button now will create a Word document that look something like this

You can learn more about styles in Microsoft Word here.

Step 7 – Add a custom style to the document

In step 6 we used the built in styles of Word. We can also create custom styles to use in the document.

Add a new styles object to the document and start creating a new style, by adding colours, size, font etc.

let doc = new Document({
    styles: {
      paragraphStyles: [
        {
          id: "myCustomStyle",
          name: "My Custom Style",
          basedOn: "Normal",
          run: {
            color: "FF0000",
            italics: true,
            bold: true,
            size: 26,
            font: "Calibri",
          },
          paragraph: {
            spacing: { line: 276, before: 150, after: 150 }
          }
        }
      ]
    },
    ...
    ...
  });

You can then apply the custom style to a paragraph.

sections: [
      {
        children: [
          ...
          ...
          new Paragraph({
            text: "This is a paragraph styled with my custom style",
            style: "myCustomStyle"
          })
        ]
      }
    ]

Conclusion

With the use of a couple of great packages we can easily create a nice looking Word document using solely client side JavaScript. Docx is very powerful and this article only covers the basics to get you up and running with a simple Word document.

Complete Example

GitHub Repo here

A complete example of the code on CodeSandbox can be found here