Styling module | docxtemplater

Usage

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.

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 :

Of course, one would normally only use some of those style properties, not all at the same time.

doc.render({
    cellBackground: "#00ff00",
    textColor: "white",
    textAlign: "center", // justify,center,left,right
    pStyle: "Heading",
    fontSize: 22,
    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",
    "italic": true,
    "bold": true,
    "underline": true
}

Shape Styling

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

{
    "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 styles :

{
    "cellBackground": "#00ffff",
    "borders": {
        "top": {
            "val": "single",
            "sz": 36,
            "space": 8,
            "color": "#FF0000"
        }
    }
}

And all style 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.8.0

Add support for bold, underline, italic.

3.7.16

Add typescript typings for styleModule.setThemeColors

3.7.15

Upgrade module to use NodeNext moduleResolution setting. See explanation here

3.7.14

Use new resolvedId API => requires docxtemplater@3.43.0

3.7.13

Bugfix to allow to change fontSize inside docx shape.

3.7.12

Fix bug when using renderAsync and parser compilation fails : the error should now be shown inside a multierror. To to this, we now use sm.getValueAsync in resolve instead of sm.getValue

3.7.11

Bugfix to set or get xml attributes correctly, even when using tabs instead of spaces in tags attributes

3.7.10

Set module.priority in order to have no more issues related to module ordering

3.7.9

Bugfix error when running asynchronously :

TypeError: Cannot read properties of undefined (reading 'filter')
at Object.resolve (docxtemplater/js/resolve.js)
at docxtemplater-styling-module/js/index.js
at async Promise.all (index 0)
at async Promise.all (index 1)

3.7.8

Upgrade to correctly pass in fileType, contentType, … to resolve

Makes it compatible with docxtemplater 3.40.1

3.7.7

Make styling module compatible with docxtemplater@3.40.0

3.7.6

With {:styleshape style1}, allow to change fillColor of normal textboxes in Powerpoint.

3.7.5

Add module.clone() internal to make module work well with subsegment module

3.7.4

Bugfix following error :

"Cannot read properties of undefined (reading 'value')"

When using the styling module in async mode (calling doc.renderAsync()) with some empty data for one of the styling tags.

3.7.3

Add support to change borders for tables (not just for paragraphs)

3.7.2

Add support for setting "fontSize".

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.13

When using stylerun module near a loop, the following error could sometimes appear :

TypeError: Cannot read properties of undefined (reading 'map')
at Object.render (docxtemplater/js/render.js:31:24)
at StyleModule.render (es6/index.js:657:31)

Now this error should no more appear.

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.

3.6.10

Make package size smaller

3.6.9

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