Styling module | docxtemplater

After installing the module, you can use a working demo by running node sample.js.

This module exposes multiple tags to dynamically change the style of a given paragraph, table cell or table row.

The current tags are :

{:stylecell s1} To style a cell
{:stylepar s2} To style a paragraph
{:stylerow s3} To style a whole row in a table
{:stylebullets s4} To style a bulleted list (change bullets color)
{:styleshape s5} To style a shape (for example, the fillColor of a rectangle)
{:stylerun s6} To style part of a paragraph that already has one style.

Add tag for styling bullets :

Usage

Your docx should contain the text: {:stylecell style}.

Usage (nodejs)

const StyleModule = require("docxtemplater-style-module");
const doc = new Docxtemplater(zip, {
    modules: [new StyleModule()],
});

doc.render({
    style: {
        cellBackground: "#00ff00",
        textColor: "white",
        fontFamily: "Calibri",
    },
});

Paragraph Styling

To style a paragraph, you can use following styles :

doc.render({
    cellBackground: "#00ff00",
    textColor: "white",
    textAlign: "center", // justify,center,left,right
    pStyle: "Heading",
    fontFamily: "Calibri",
    borders: {
        top: {
            val: "single",
            sz: 36,
            space: 8,
            color: "#FF0000",
        },
    },
});

Run Styling

To style a run, you can use following styles :

{
    "textColor": "white",
    "fontFamily": "Calibri"
}

Shape Styling

To style a shape, you can use the following properties :

{
    "fillColor": "#ff0000",
    "strokeColor": "#00ff00"
}

Bullets Styling

To style a list of bullets, you can use following styles :

{
    "bulletColor": "#00ff00"
}

Row or Cell Styling

To style a cell, you use the {:stylecell s1} tag. To style all cells in a given row, you use the {:stylerow s1} tag.

You can use following properties :

{
    "cellBackground": "#00ffff"
}

And all properties from Paragraph Styling

Changing theme colors

It is possible to change the colors of the currently used theme by using following code :

const StyleModule = require("docxtemplater-style-module");
const styleModule = new StyleModule();
const doc = new Docxtemplater(zip, { modules: [styleModule] });

styleModule.setThemeColors({
    "a:dk1": "000000",
    "a:lt1": "FFFFFF",
    "a:dk2": "1F497D",
    "a:lt2": "EEECE1",
    "a:accent1": "4F81BD",
    "a:accent2": "C0504D",
    "a:accent3": "9BBB59",
    "a:accent4": "8064A2",
    "a:accent5": "4BACC6",
    "a:accent6": "F79646",
    "a:hlink": "0000FF",
    "a:folHlink": "800080",
});

doc.render({
    style: {
        cellBackground: "#00ff00",
        textColor: "white",
        fontFamily: "Calibri",
    },
});

Note that the call to the "setThemeColors" function should be done after the instatiation of the Docxtemplater instance and before the call to the "render" method.

CHANGELOG

3.7.1

Bugfix of stacktrace thrown when used in async mode with doc.renderAsync();

The error was :

TypeError: Cannot read properties of undefined (reading 'value')
    at ScopeManager._getValue (/home/edgar/www/xt/js/scope-manager.js:43:7)
    at ScopeManager.getValue (/home/edgar/www/xt/js/scope-manager.js:162:30)
    at Render.render (/home/edgar/www/xt/js/modules/render.js:97:30)
    at moduleRender (/home/edgar/www/xt/js/render.js:9:30)

Now the error will no more show up and the template will render correctly even in async mode.

3.7.0

Add possibility to change themeColors using styleModule.setThemeColors() API

3.6.18

Avoid issue Cannot read properties of undefined (reading 'value')

when using the module asynchronously with Slides module, and having the data return synchronously.

3.6.17

Avoid possible issue of "Maximum call stack size exceeded"

3.6.16

Fix typescript definition file :

Previously, when writing import StyleModule from "docxtemplater-style-module";, the following error would be shown :

import StyleModule
Module '"node_modules/docxtemplater-style-module/js/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259)

3.6.15

Add support for textAlign: "right" , "center", "justify".

3.6.14

Update to make module compatible with docxtemplater@3.30.0

Fixes following error :

TypeError: Cannot read properties of undefined (reading 'droppedTagsInsidePlaceholder')
    at parse (js/parser.js:170:46)

3.6.12

Bugfix to correctly change bulletcolor when using a paragraphStyle

3.6.11

Bugfix to correctly be able to change shapes in PPTX documents when using "description" of shape.

Avoid errors when using "bulletColor" on paragraphs that are not bullets : in this case, previously, docxtemplater would crash with "Cannot read property indexOf" of undefined. Now, this property is ignored in this case

3.6.8

Avoid corruption when having nested paragraphs and "w:txbxContent"
Avoid Error :stylepar tag should be placed inside a paragraph when using {:stylepar xxx} tag inside a Powerpoint title

3.6.7

Add support for "borders" to set or update paragraph borders.

3.6.6

Bugfix {:stylerun} to correctly style run even when there is a "w:drawing" (a picture) defined inside the run.

3.6.5

Bugfix {:stylerun} to correctly style run even when there is a "mc:AlternateContent" (a shape) defined inside the run.

Bugfix {:stylerun} to remove the "w:themeColor" and "w:themeTint" attributes before styling a run.

3.6.4

Add {::stylerun} tag to be able to edit the rStyle of the run.

3.6.3

{:stylerun} tag now doesn't leak into other runs or other paragraphs.

3.6.2

Make {textColor: "#ff0000"} work well in all cases (previously, it worked only if a <w:rPr> tag was present in the docx file for that particular run)

3.6.1

Make stylerun and stylebullets work together even when both are specified in the same run.

3.6.0

Add possibility to add multiple {:stylerow} tags in the same table cell (to be able to put several conditions).

Bugfix to make {:stylerun s2} work correctly (eg expand the whole run, even if there are multiple runs with the same exact properties).

Bugfix following error :

TypeError: Cannot read properties of undefined (reading 'map')
    at Object.render (/home/edgar/www/cli-dwight/node_modules/docxtemplater/js/render.js:39:24)

when using the stylebullets and stylerun tag together

3.5.0

Add tags for styling bullets and tag for styling runs of text.

{:stylebullets s1} and {:stylerun s2}

Make module compatible with docxtemplater@3.28.0. Please make sure to update docxtemplater to 3.28.0 at the same time you update this module. The internal change made is the use of the new matchers API which fixes bugs that were triggered depending on the order of the modules that are attached to the instance. Now the order of the modules should not matter as expected.

3.4.1

Make module work in async mode : in previous versions, the message : TypeError: Cannot read properties of undefined (reading 'indexOf') could occur.

3.4.0

Make module compatible with docxtemplater@3.27.0. Please make sure to update docxtemplater to 3.27.0 at the same time you update this module

3.3.10

Add support to use {:styleshape s1} inside the description of the shape.

3.3.9

[pptx] Add support for {:styleshape s1} for Powerpoint documents (fillColor and strokeColor)

3.3.8

[docx] Add support for {:styleshape s1} to change the fillColor and strokeColor of a shape.

{:styleshape s1}`

doc.render({
    s1: {
        fillColor: "#554499",
        strokeColor: "#000000",
    },
});

3.3.7

Add support to also add text after changing the style, for example :

{:stylepar s1}

doc.render({
    s1: {
        text: "Hello John !",
        fontFamily: "Bahnschrift",
        textColor: "#554499",
    },
});

3.3.6

Use @xmldom/xmldom instead of xmldom, see this github issue

3.3.5

Generate files in built with correct filename In previous versions, the filename was always build/docxtemplater.js. Now the filename is build/style-module.js The .min.js file is also created now.

3.3.4

Add typescript definitions for public API

3.3.3

Move webpack from dependency to devDependency (which triggered an error during installation on node version 10)

3.3.2

Internal change to allow to match tags with non-breaking space.

When entering Ctrl+Shift+Space, a "non-breaking" space is created.

When using a non-breaking space in the tag {:stylecell style}, the tag would not be replaced correctly.

3.3.1

Update to make module work in the browser

3.3.0

Add support for pptx

Add {:stylerow} tag

Require docxtemplater 3.17.6

3.2.1

Declare supportedFileTypes, which allows to use this module with the new docxtemplater constructor which was introduced in docxtemplater 3.17.

3.2.0

Add support for changing pStyle in {:stylepar}

3.1.4

Update browser build to use XMLSerializer instead of xmldom
Use requiredAPIVersion

3.1.3

Move docxtemplater from devDependencies to dependencies

Explanation : On some versions of npm (notably 5.8.0), when having a package containing docxtemplater-styling-module, the installation will generate a tree of node_modules that puts the module on a level where it has no access to docxtemplater. By explicitly asking it as a dependency, this issue is avoided.

3.1.2

Make module compatible with docxtemplater version 3.5 and below.

Explanation : Recently, the scopemananger API (internal API) has changed, this new version of the styling module makes the module work with both versions newer than 3.6 and older than 3.6 of docxtemplater.

3.1.1

Add meta context argument to custom parser with information about the tag for each types of tags

3.1.0

Add the {:stylepar style} tag to change the paragraph style
Add support for fontFamily: "Calibri"
Refactor module.prefix into an object {cell: ':stylecell', paragraph: ':stylepar'}

3.0.0

Initial release

Try the demos