QuillToWord

Simple Description: Turn the content in your QuillJS editor into a downloadable Microsoft Word document.

Technical Description: Convert a QuillJS delta object into a .docx file.

Check out a live Angular demo on Stackblitz.

How to Install

Install using npm:

npm i quill-to-word --save

How Do I Use It?

Pass a QuillJS delta object to the generateWord() function of the quill-to-word package. Be sure to await the generateWord() function, because it returns a Promise.

const quillDelta = quillInstance.getContents();
const doc = await quillToWord.generateWord(quillDelta);

quillInstance refers to the object created by calling new Quill().

What Does the Package Do?

This package creates a Microsoft Word DOCX file from a QuillJS Delta. In short, this package will allow you to download the contents of your QuillJS in-browser editor as a Word document.

How Does It Work?

QuillJS stores its content in a delta format. QuillToWord parses a Quill delta object into a paragraph format using QuillJSParser. Then, QuillToWord generates a Word document, using the popular DOCX package.

How Can I Download the Word Document from the Browser?

You can download the Word document created by QuillToWord by using the FileSaver package. You'll need to install file-saver.

npm i file-saver --save

npm i @types/file-saver --save-dev

Here is an example of downloading from a browser.

import { saveAs } from 'file-saver';
import * as quillToWord from 'quill-to-word';
import * as quill from 'quilljs';

const quillInstance = new Quill();
const delta = quillInstance.getContents();
const quillToWordConfig = {
    exportAs: 'blob'
};
const docAsBlob = await quillToWord.generateWord(delta, quillToWordConfig);
saveAs(docAsBlob, 'word-export.docx');

How Can I Configure QuillToWord?

QuillToWord supports two configurable options: export configuration and style configuration.

Export Configuration

By default, QuillToWord will return a docx object from a call to generateWord(). QuillToWord is also capable of returning a Blob, a Buffer, or a base64 string. To obtain one of these alternative objects, pass a configuration object as the second argument to generateWord(). See the example below.

const quill_delta = quillInstance.getContents();
const configuration = {
    exportAs: 'blob' // could also be 'buffer', 'base64', or 'doc'
}

const docx_blob = await quillToWord.generateWord(quill_delta, configuration); // returns Promise<Blob>

Style Configuration

As you are likely aware, Microsoft Word documents enable users to specify style formats for various types of text within a document. For instance, specific fonts, sizes, and spacing can be set for headings, normal text, block quotes, and so forth.

QuillToWord is prepackaged with default styles for several types of text commonly used within a quill editor: normal, heading 1, heading 2, lists, code blocks, and block quotes. If you prefer to specify your own styling for these types of text, you can pass a configuration object as the second argument to generateWord(). The configuration object should satisfy the following interface:

interface Configuration {
    paragraphStyles: {
        normal?: {  // this is the name of the text type that you'd like to style
            paragraph?: {
                spacing?: {
                    line?: number;
                    before?: number;
                    after?: number;
                },
                alignment?: AlignmentType // from docx package
                indent?: {
                    left?: number;
                    hanging?: number;
                    right?: number;
                }
            },
            run?: {
                font?: string;
                size?: number;
                bold?: boolean;
                color?: string; // as hex value e.g., ffaaff
                underline?: {
                    type?: UnderlineType; // from docx package
                    color?: string // just use 'auto'
                }
                italics?: boolean;
                highlight?: string; // must be named values accepted by Word, like 'yellow'
            }
        }
    }
}

Note that all of the same properties shown for normal here can be set for the following: heading_1, heading_2, list_paragraph, code_block, and block_quote.

Also, be aware that most of the formats are based on the normal format. As a result, modifying the normal format could cause changes in the other formats as well.

Now, let's see an example of configuring the header format. The configuration object in the example below will override the default styling for heading level one.

const quill_delta = quillInstance.getContents();
const config: Config = {
    paragraphStyles: {
        header_1: {
            paragraph: {
                spacing: {
                    before: 1200,
                    after: 1000
                }
            },
            run: {
                size: 64,
                bold: true,
                color: 'ff88bb'
            }
        }
    }
};
const doc = await quillToWord.generateWord(quill_delta, config);