Demo
Readme
Changelog
Releases RSS Feed
Compatibility : nodejs and browser

Summary (version 3.21.5) Buy html module

This module exposes a tag to include html. The HTML is converted to Native Open XML by the module. This allows you to add a formatted field entered by the user

This module is available as part of the docxtemplater PRO plan.

README

Html Module

This module exposes a tag to include html. The HTML is converted to Native Open XML by the module. This allows you to add a formatted field entered by the user, or add more complex data by writing simple HTML (Open XML is much more complex to work with then HTML).

The HTML module currently supports:

  • <br>
  • <p>
  • <h1-6> tags, <h1> translates to Title, <h2> translates to Header1, <h3> translates to Header2, because there is no concept of title in the body of HTML
  • <p>
  • <b>
  • <i>
  • <u>
  • <ul>
  • <ol>
  • <li>
  • <span>
  • <small>
  • <s>
  • <strong>
  • <em>
  • <code>
  • <table>, <tr>, <td>, <tbody>, <thead>, <tfoot>, <th> tags
  • <a href="URL">Linktext</a>
  • <input type="checkbox"> and <input type="checkbox" checked>
  • <sub> and <sup>
  • <pre>, by using Courrier font and retaining all spaces
  • <img> only if including the imageModule too, by using base64 src
  • <svg> only if including the imageModule too, but this format is only readable on newer Word version : Microsoft Word, PowerPoint, Outlook, and Excel 2016 on Windows, Mac, Android and Windows Mobile. See https://support.office.com/en-us/article/edit-svg-images-in-microsoft-office-2016-69f29d39-194a-4072-8c35-dbe5e7ea528c for details about this feature
  • style="color: #bbbbbb" property
  • style="font-size: 30px" property
  • style="font-family: 'Times New Roman'" property
  • style="background-color: blue" property (or with rgb codes)
  • style="text-decoration: underline" property
  • style="padding-left: 30px"
  • style="width:33%; height: 50%;" (on td only)
  • style="text-align:justify" (or other values)
  • style="vertical-align: bottom" (on td)
  • style="border: none" (on table)
  • style="break-after:page"
  • style="break-before:page"

Important : This module only supports docx, not pptx, for multiple reasons

Installation:

You will need docxtemplater v3: npm install docxtemplater

Install this module with npm install --save "$url"

Usage

var HTMLModule = require("docxtemplater-html-module");

var opts = {};

var htmlModule = new HTMLModule(opts);

var zip = new PizZip(content);
var docx = new Docxtemplater()
    .attachModule(htmlModule)
    .loadZip(zip)
    .setData({ html: "<b>Hello</b>, Foo !" })
    .render();

var buffer = docx
    .getZip()
    .generate({ type: "nodebuffer", compression: "DEFLATE" });

fs.writeFile("test.docx", buffer);

In the browser, use following HTML file :

<html>
    <script src="node_modules/docxtemplater/build/docxtemplater.js"></script>
    <script src="node_modules/pizzip/dist/pizzip.js"></script>
    <script src="node_modules/pizzip/vendor/FileSaver.js"></script>
    <script src="node_modules/pizzip/dist/pizzip-utils.js"></script>
    <script src="build/html-module.js"></script>
    <script>
        PizZipUtils.getBinaryContent(
            "examples/html-block-example.docx",
            function(error, content) {
                if (error) {
                    console.error(error);
                    return;
                }
                var opts = {};

                var htmlModule = new DocxtemplaterHtmlModule(opts);
                var zip = new PizZip(content);
                var doc = new docxtemplater()
                    .loadZip(zip)
                    .attachModule(htmlModule)
                    .compile();

                doc.setData({ html: "<p>Hello <b>John</b></p>" });
                doc.render();
                var out = doc.getZip().generate({
                    type: "blob",
                    mimeType:
                        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                });
                saveAs(out, "generated.docx");
            }
        );
    </script>
</html>

Your docx should contain the text: {~html}. After installing the module, you can use a working demo by running node sample.js.

  • Any tag starting with ~ is used for inline HTML, such as : {~html} or {~inlineComment} which will use the "inlineComment" data
  • Any tag starting with ~~ is used for block HTML, such as : {~~html} or {~~styledTable} which will use the "styledTable" data

To be clear :

  • The {~inline} tag is used when you want to replace part of a paragraph. For example you can write :
My product is {~blueText} and costs ...

The tag is inline, there is other text in the paragraph. In this case, you can only use inline HTML elements (<span> , <b> , <i>, <u>\, …)

  • The {~~block} tag is used when you want to replace a whole paragraph, and you want to insert multiple elements
{~~block}

The tag is block, there is no other text in the paragraph. In this case, you can only use block HTML elements (<p>, <ul>, <table>, <ol>, <h1>)

Also, in tr elements, we can have lists, …, so you have to surround your tags with <p>.

This code will throw an error (Tag 'em' is of type inline, it is not supported as the root of a block-scoped tag) :

<td style="width:33.333333333333336%;">foobar<em>italics</em></td>

And this code will work :

<td style="width:33.333333333333336%;">
    <p>foobar<em>italics</em></p>
</td>

Options

It is possible to set options to the htmlModule.

Description of the options :

  • ignoreUnknownTags [default=false]: If this option is set to true, and the module finds an HTML tag that it doesn't handle, it will not fail but instead make as if the tag was of type <span>;
  • ignoreCssErrors [default=false]: If this option is set to true, all CSS errors are ignored and the library tries to parse the CSS with a best-effort algorithm;
  • styleTransformer makes it possible to rewrite the styles that are used by the HTML module, see below for an example;
  • sizeConverters makes it possible to change the ratio between px and dxa for different tags;
  • styleSheet makes it possible to add style to all HTML tags that are inserted.

To ignore all unknown tags:

const module = new HTMLModule({
    ignoreUnknownTags: true
});

To remap the styles so that h1 maps to Heading1 (instead of the default Title)

function styleTransformer(tags, docStyles) {
    tags.h1 = docStyles.Heading1;
    tags.h2 = docStyles.Heading2;
    tags.h3 = docStyles.Heading3;
    tags.h4 = docStyles.Heading4;
    tags.h5 = docStyles.Heading5;
    return tags;
}
const module = new HTMLModule({
    styleTransformer: styleTransformer
});

To change the size of "padding-left":

const module = new HTMLModule({
    sizeConverters: {
        paddingLeft: 20
    }
});

This will make paddingLeft a little bit larger on word than the default (which is 15).

To add a global stylesheet

const module = new HTMLModule({
    styleSheet: `
        h1 {
            font-size: 60px;
        }
        span#foo {
            font-size: 30px;
            color: red;
        }
    `
});

Reasons for not supporting pptx

This module handles only docx documents, not pptx.

The reason for that is that HTML maps well to docx because they use the same linear flow, eg elements are placed one after the other in the document. However PPTX documents have multiple slides, which are stored in different files, and each element is positioned absolutely in the slide. For example, in PPTX if you have a table element and a paragraph in the same slide, they need to be placed in two "different" blocks.

Lets take a simple example :

pptx Paragraph and table in PPTX

docx Paragraph and table in DOCX

Here is how these documents map to XML :

For pptx

<p:spPr>
    <a:xfrm>
        <a:off x="2376000" y="936000"/>
        <a:ext cx="3384000" cy="346320"/>
    </a:xfrm>
    <a:t>My paragraph</a:t>
</p:spPr>
<p:graphicFrame>
    <p:xfrm>
        <a:off x="3579480" y="2726640"/>
        <a:ext cx="5075280" cy="1439280"/>
    </p:xfrm>
    <a:tbl>
    ...
    </a:tbl>
</p:graphicFrame>

For docx

<w:p>
  <w:r>
    <w:t>My paragraph</w:t>
  </w:r>
</w:p>
<w:tbl>
...
</w:tbl>

As you can see, in docx, the elements come one after the other, without any "placement" information, in pptx however, these are placed absolutely with the <a:xfrm> and <p:xfrm> tags.

In standard HTML, you would write this example with :

<p>My paragraph</p>
<table>
    ...
</table>

which maps very well to docx, but not to pptx.

Support for images with <img>

To be able to replace the <img> tag, you have to also have access to the Image Module.

Then, you can do :

const HTMLModule = require("docxtemplater-html-module");
const ImageModule = require("docxtemplater-image-module");
const htmlModule = new HTMLModule({
    img: {
        Module: ImageModule,
        // By default getSize returns the width and height attributes if both are present, or 200x200px as a default value.
        getSize: function(data) {
            // The html element, for example, if the data is :
            // '<img height="20" src="...">'
            // you will have data.element.attribs.width = '20'
            console.log(data.element);
            // The arraybuffer of your image
            // (you could use https://github.com/image-size/image-size to calculate the size)
            console.log(data.src);
            console.log(data.part.value); // This contains 'myTag' if your tag is {~myTag}
            // You return an array in pixel (here we have width 50px and height 100px)
            return [50, 100];
        }
    }
});

The <img> tag supports base64 and also urls, so for example, you can do :

<p>Hello</p>
<img
    src="data:image/gif;base64,R0lGODlhDAAMAIQZAAAAAAEBAQICAgMDAwQEBCIiIiMjIyQkJCUlJSYmJigoKC0tLaSkpKampqenp6ioqKurq66urrCwsPb29vr6+vv7+/z8/P39/f7+/v///////////////////////////yH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAADAAMAAAFSiCWjRmViVVmZRWWjiurXrBI2uMkFcdjrRfaJQIQCAKQTDBmKAYACAwuswAABoBEDMUgYAkOpWiFeRgUDZIKNnqpLaJLXM2KjaYhADs="
    alt=""
/>

Note that HTTP URLs in src will not work by default, you have to configure docxtemplater in async mode to do so.

You can use the following getSize function if you would like to use the same width and height as the image source.

import sizeOf from "image-size";
function getSize(img) {
    const buffer = new Buffer(img.src);
    return sizeOf(buffer);
}

Support for images in async support (for urls)

It is possible to add images with src="http://......" by using async docxtemplater.

You can customize the image resolver with the getValue function.

Here is an example showing how to retrieve the data form https://avatars3.githubusercontent.com/u/2071336?v=3&s=100 :

const fs = require("fs");
const https = require("https");
const http = require("http");
const url = require("url");
const DocxTemplater = require("docxtemplater");
const ImageModule = require("docxtemplater-image-module");
const HTMLModule = require("docxtemplater-html-module");
const PizZip = require("pizzip");

function base64DataURLToArrayBuffer(dataURL) {
    const stringBase64 = dataURL.replace(/^data:image\/([a-z]+);base64,/, "");
    let binaryString;
    if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
    } else {
        binaryString = Buffer.from(stringBase64, "base64").toString("binary");
    }
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes.buffer;
}
const defaultImage = base64DataURLToArrayBuffer(
    "data:image/gif;base64,R0lGODlhDAAMAIQZAAAAAAEBAQICAgMDAwQEBCIiIiMjIyQkJCUlJSYmJigoKC0tLaSkpKampqenp6ioqKurq66urrCwsPb29vr6+vv7+/z8/P39/f7+/v///////////////////////////yH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAADAAMAAAFSiCWjRmViVVmZRWWjiurXrBI2uMkFcdjrRfaJQIQCAKQTDBmKAYACAwuswAABoBEDMUgYAkOpWiFeRgUDZIKNnqpLaJLXM2KjaYhADs="
);
const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
const opts = {
    img: {
        Module: ImageModule,
        getValue: el => {
            const src = el.attribs.src;
            return new Promise(function(resolve) {
                // You should handle any errors here, if the promise rejects, the rendering will fail with that error.
                // This is to continue to handle base64 images
                if (base64Regex.test(src)) {
                    resolve(base64DataURLToArrayBuffer(src));
                    return;
                }

                let parsedUrl;
                try {
                    parsedUrl = url.parse(src);
                } catch (e) {
                    resolve(defaultImage);
                    return;
                }

                let client;
                if (parsedUrl.protocol === "https:") {
                    client = https;
                }
                if (parsedUrl.protocol === "http:") {
                    client = http;
                }
                if (!client) {
                    resolve(defaultImage);
                    return;
                }

                client
                    .get(parsedUrl, function(res) {
                        const data = [];

                        res.on("error", function(err) {
                            console.log("Error during HTTP request", err);
                            resolve(defaultImage);
                        });

                        res.on("data", function(chunk) {
                            data.push(chunk);
                        }).on("end", function() {
                            resolve(Buffer.concat(data));
                        });
                    })
                    .on("error", () => {
                        resolve(defaultImage);
                    });
            });
        }
    }
};

const htmlModule = new HTMLModule(opts);
const content = fs.readFileSync("demo_template.docx");
const zip = new PizZip(content);
const docx = new DocxTemplater().loadZip(zip);
docx.attachModule(htmlModule);
docx.compile();
docx.resolveData({
    html:
        '<img width="30" height="30" src="https://avatars3.githubusercontent.com/u/2071336?v=3&s=100"/>'
}).then(function() {
    docx.render();
    const buffer = docx
        .getZip()
        .generate({ compression: "DEFLATE", type: "nodebuffer" });
    fs.writeFileSync("demo_generated.docx", buffer);
});

How are pixels converted to word ?

The problem is that a pixel is not a distance, but just the smallest entity on a given screen. Our usual devices will get more and more pixels but use the same size.

Thus we can't set in stone how long a pixel (in inches or centimeters).

To specify the conversion, we ask two questions :

  • deviceWidth : How large is your HTML document in pixels (typically it would be 1024px).

  • getDxaWidth : How large is your Docx document in dxas (1/1440 of an inch), for a standard A4 document, the total width (including margins) is 11906 dxas, and the width without margins (1 inch margin on the left and 1 inch margin on the right), is 11906-2880=9026 dxas

With these two options, docxtemplater can then accordingly convert any pixel value to a coherent size in your word document.

By default the options are as follows :

options = {
    deviceWidth: 487,
    getDxaWidth: function defaultGetDxaWidth(allSections, currentSection) {
        return 9026;
    }
};

It is possible to calculate the size in dxa directly from the template :

options = {
    // ...,
    getDxaWidth: function(allSections, currentSection) {
        return (
            (currentSection.width -
                currentSection.leftMargin -
                currentSection.rightMargin) /
            currentSection.cols
        );
    }
};

You can change your deviceWidth to 1200, to be able to have a <table width="1200">...</table> fit into the page for example.

Customize docx-styles with classes

For block elements (p, h1,h2,h3,h4,h5,h6, ul, ol, and table), it is now possible to customize the docxstyle that is used depending on the html class of that element.

const options = {
    elementCustomizer: function(element) {
        if (
            element.classNames.indexOf("my-heading-class") !== -1 &&
            element.name === "p"
        ) {
            return { pStyle: "Heading" };
        }
        // element.part.value will be the string "html1" if the tag used is {~~html1}
    }
};
const htmlModule = new HTMLModule(opts);
doc.attachModule(htmlModule);

The following HTML :

<p>Paragraph</p>
<p class="my-heading-class">Paragraph - heading</p>
<p>Normal paragraph</p>

will have the second paragraph rendered by using the Heading type.

Of course, you can use any docx style that you have defined in your docx template.

CSS Selectors

It is also possible to add CSS style with CSS selectors.

For example, if you want to change the font size with the CSS selector : h4, th p.important

const options = {
    elementCustomizer(element) {
        if (element.matches("h4, th p.important")) {
            return {
                // htmlStyle must be valid CSS style
                htmlStyle: "font-size: 30px;"
            };
        }
    }
};
const htmlModule = new HTMLModule(opts);
doc.attachModule(htmlModule);

You can use following selectors currently :

Selector Example Example description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"

Customize bullets

It is possible to customize bullets with the elementCustomizer API

For example, you can write :

options = {
    elementCustomizer(element) {
        if (element.matches("ul")) {
            return {
                bullets: ["·", "-", "+"]
            };
        }
    }
};
const htmlModule = new HTMLModule(opts);
doc.attachModule(htmlModule);

Limitations

For tables, there is no difference between table-layout:fixed and table-layout:auto.

Also, unlike the auto algorithm, the width of the column does not depend on the content of the table, but just on the width applied in the CSS style.

This means that if you want to have columns of different sizes in your generated document, you should specify the width in the first column on all tr elements.

CHANGELOG

3.21.5

The runProperties (w:rPr) used where the first encountered, instead of using the one inside the run itself (w:r).

3.21.4

For table tag, when the {~~htmlTag} is inside a multi-column session, the width:"100%" will use the width of one column instead of the width of one page.

3.21.3

Add support for margin-left on paragraphs

3.21.2

Add support for font-family in CSS

3.21.1

Add support for break-after: page and break-before: page in CSS

3.21.0

Add support for <pre> tag

Make it possible to have width: 100% for images inside tables

Fix the calculation of width for images so that a table with a width of 200px shows the same width as an image with width of 200px. Before this release, the images were smaller than expected.

3.20.3

Keep paragraph style including indents and alignment

3.20.2

Add support for pt values on table width

3.20.1

Add support for margin: 0 (without any unit)

3.20.0

Add support for colspan + rowspan on the same cell.

Multiple improvements for rowspan

3.19.5

Add support for Right-To-Left support with w:bidi tag.

Add support for margin-top and margin-bottom on li tags

3.19.4

Bugfix corrupted document when using margin-top or margin-bottom

3.19.3

Add support for margin-top and margin-bottom on paragraphs

3.19.2

Bugfix spacing in li :

<p>
<ul>
<li><em>Lorem ipsum dolor si amet</em> <strong>Test</strong></li>
</ul>
</p>

The space will now be correctly rendered

3.19.1

Bugfix : support vertical-align: middle; for td

3.19.0

Add initial support for rowspan on table td

3.18.4

Bugfix of propagation of style to all paragraphs.

For example, when having :

<div>
    <p>Uncentered</p>
    <p style="text-align:center">Centered</p>
</div>

The first paragraph was centered even if it should not.

3.18.3

Bugfix to avoid Cannot read property 'concat' of undefined" when defining styles on some elements (such as th).

3.18.2

Always generate output with w:sz as integer (instead of float) by using Math.round

3.18.1

Add support for td { width: 20% } in CSS

Bugfix issue of width of all cols being smaller than width of whole table

3.18.0

Add support for :

  • :first-child, :last-child, :nth-child(3) selectors
  • border-left, border-top, border-right and border-bottom on td and th for tables
  • text-align:center on th/td
  • border-style double property

3.17.3

Bugfix for "Cannot read property 'getAttribute' of undefined" when having styles without names.

3.17.2

Bugfix [object Object] shown when using async mode (resolveData) with null value

3.17.1

Bugfix corrupt document when having empty w:sdtContent

3.17.0

Add support for async image generation

3.16.9

Keep fontFamily if set in run properties

3.16.8

Do not corrupt document if having empty value in block html inside table cell

3.16.7

Do not fail if they are no sections at all in the document (return a default size).

3.16.6

Bugfix corrupt document when using table colspan with just one row.

3.16.5

  • Add support for centered tables with margin: 0 auto;

3.16.4

Inherit paragraph properties inside tables.

3.16.3

  • The table color properties were "leaking" from one cell to the other, resulting in wrong colors being used sometimes. This is now fixed

3.16.2

  • Improve list support when ul is a direct child of ol or or is a direct child of ul.

  • Add the style (run properties) of the {~~htmlTag} to bullet points so that the bullet points have the same size as the text

3.16.1

  • Add support for font-weight:bold of font-weight:700

3.16.0

  • Add support for styleSheet option in module constructor

3.15.1

  • Add support for margin-left on ul and ol

3.15.0

  • Better support for ul and ol : when using ols inside uls, if the TextBody style did not exist, the ul and ol style were missing bullets.

  • Add way to customize bullets in the elementCustomizer API

3.14.1

Update html-parser require calls to work well with Rollup

3.14.0

Improve table support (background && background-color, color, font-size.

Do not duplicate runProps anymore

3.13.6

Add support for inline and block <code> tags

3.13.5

Update to support the new image module v3.4.2

3.13.4

Update to support new image module with (3.4.1 of the image-module)

3.13.3

Add support for <a name="mark"></a> to generate docx bookmarks

3.13.2

Add support for <a href="#mark">Go to mark</a> and <p id="mark">Mark</p> by using docx bookmarks

3.13.1

Links with no content are now hidden from the generated document (ignored)

3.13.0

Add two additional options for determining the meaning of 1 pixel.

The deviceWidth option explicitly permits to say that you want to have a window of for example 1200 pixels.

The getDxaWidth option to select how many dxas (20th of a point, or 1440 of an inch) your page is.

With these two options, docxtemplater can then accordingly convert any pixel value to a coherent size in your word document.

3.12.0

Add support for setting properties on multiple levels of divs/blockquotes or any block element.

For example :

<div style="text-align: justify;">
    <blockquote>
        Sit aliquid vitae non magni ex Eius saepe molestias minima non tempore
        amet! Accusamus corrupti at ipsa necessitatibus consequatur. Corporis
        autem debitis reiciendis illo modi, inventore. Delectus magni sint
        doloremque?
    </blockquote>
</div>

3.11.10

Add support for images inside link and inside lists, for example :

<ul>
    <li>
        <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QIJBywfp3IOswAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAkUlEQVQY052PMQqDQBREZ1f/d1kUm3SxkeAF/FdIjpOcw2vpKcRWCwsRPMFPsaIQSIoMr5pXDGNUFd9j8TOn7kRW71fvO5HTq6qqtnWtzh20IqE3YXtL0zyKwAROQLQ5l/c9gHjfKK6wMZjADE6s49Dver4/smEAc2CuqgwAYI5jU9NcxhHEy60sni986H9+vwG1yDHfK1jitgAAAABJRU5ErkJggg=="
        />
        Docxtemplater
    </li>
</ul>
<p>
    <a>
        Docxtemplater
        <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QIJBywfp3IOswAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAkUlEQVQY052PMQqDQBREZ1f/d1kUm3SxkeAF/FdIjpOcw2vpKcRWCwsRPMFPsaIQSIoMr5pXDGNUFd9j8TOn7kRW71fvO5HTq6qqtnWtzh20IqE3YXtL0zyKwAROQLQ5l/c9gHjfKK6wMZjADE6s49Dver4/smEAc2CuqgwAYI5jU9NcxhHEy60sni986H9+vwG1yDHfK1jitgAAAABJRU5ErkJggg=="
        />
    </a>
</p>

3.11.9

Add part argument to getSize

3.11.8

  • Add support for : text-align: justify

  • Add support for : bgcolor attribute on td and tr

3.11.7

  • Add support for : padding-top,padding-bottom,padding-left,padding-right on td

  • Add support for valign attribute on td

  • Add support for color in more CSS formats for background-color, color, border-color, for example : <span style='color: white;background-color: hsl(120, 100%, 50%); '>color output</span> will now work.

  • Make it possible to use text-align inside td

3.11.6

Add support for :

  • vertical-align style on td
  • background-color style on tr
  • border-color on td

3.11.5

Make it possible to customize pStyle for list items, for example :

const ulpStyles = ["ListBullet", "ListBullet2", "ListBullet3"];
options.elementCustomizer = function({ name, listLevel }) {
    if (name === "ul") {
        return { pStyle: ulpStyles[listLevel], useNumPr: false };
    }
};

listLevel will be 0, 1, 2 depending on the nested level of the item in the HTML.

3.11.4

Do not apply elementCustomizer on implicit paragraphs.

For example, if you had in your html :

<table>
    <tr>
        <td>Lorem</td>
    </tr>
</table>

and wrote :

const opts = {
    // ...,
    elementCustomizer(element) {
        if (element.matches("td")) {
            return {
                pStyle: "TextBody"
            };
        }
        if (element.matches("p")) {
            return {
                pStyle: "Heading"
            };
        }
    }
};

Then, before this version, the text "Lorem" would use the "Heading" style.

In this new version the implicit paragraph <p>Lorem</p> would not trigger a call to elementCustomizer at all, thus using "TextBody", which is the correct style to apply !

3.11.3

Make it possible to style implicit paragraphs in td by setting a pStyle on the td element from elementCustomizer.

  • Fix bug of pStyle not kept in certain cases.

3.11.2

  • Add support to set td width with style in px

The style property takes precendence over the style attribute, for example :

<td width="100" style="width: 400px" align="center">John</td>

will resolve to a width of 400px.

3.11.1

Add ignoreCssErrors to ignore CSS parse errors.

3.11.0

  • Add new selector API that makes it possible to style elements with CSS like selectors , for example :

    const opts = {
        // ...,
        elementCustomizer(element) {
            if (element.matches("th h3.p1, tr>th>h3.p3, tr>h3.nomatch")) {
                return {
                    htmlStyle: "background-color: #ff0000;"
                };
            }
        }
    };
    
  • Add way to remove all table borders by specifying :

    For example

    <table style="border: none;">
        <tr>
            <td>Hello</td>
        </tr>
    </table>
    
  • Bugfix add possibility to style <a> element (link)

3.10.5

  • Update browser build to use XMLSerializer instead of xmldom

  • Use requiredAPIVersion

3.10.4

  • Fix browser build failing Nodes of type '#document' may not be inserted inside nodes of type ...

3.10.3

  • Fix browser build "TypeError: Argument 1 of XMLSerializer.serializeToString does not implement interface Node."

3.10.2

  • Support elementCustomizer even when having deeply nested paragraphs, for example with <div><p>Hello</p></div>

3.10.1

Add support for :

  • align attribute on table cell

  • enhance colspan support when widths are not all fixed

  • table width as percentage

3.10.0

Add support for :

  • Background-color in tables (in css format)

  • Better use width in tables (which now generates colgrid and gridspan)

  • Add support for align="center"

  • Background-color in span (in css format)

3.9.2

  • Add {part} argument to elementCustomizer

3.9.1

  • Move docxtemplater from devDependencies to dependencies

Explanation : On some versions of npm (notably 5.8.0), when having a package containing docxtemplater-html-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.9.0

  • Drop paragraphCustomizer api (which was added in 3.8.4), for a more generic elementCustomizer API.

3.8.4

Make it possible to customize docxstyles depending on classnames.

3.8.3

  • Make module compatible with docxtemplater version 3.5 and below.

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

3.8.2

Add support for svg tag (needs the image module too) (this format is only readable on newer Word version : Microsoft Word, PowerPoint, Outlook, and Excel 2016 on Windows, Mac, Android and Windows Mobile).

3.8.1

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

3.8.0

  • Use default paragraph style instead of textbody for paragraphs

3.7.1

  • Fix issue with style that were overriden if the styles had the same name

3.7.0

  • Add styles only when using an HTML tag

3.6.6

  • Add way to change the size of paddingLeft with sizeConverters

3.6.5

  • Add support for padding-left : <p style="padding-left:15px">Hello</span>

3.6.4

  • Add support for font-size : <span style="font-size: 15px">Hello</span>

3.6.3

  • Add support for more image types in img tag : GIF, JPEG, BMP, PNG work now

3.6.2

  • Add support for blockquote tags

3.6.1

  • Correctly handle &#58 in style attributes (parsed as :).
  • Fail with clear error message if style attribute cannot be parsed

3.6.0

Add support for <img> if using imagemodule.

3.5.10

Throw explicit error when using pptx instead of docx

3.5.9

Fix bug introduced in 3.5.5 : When using <li> elements, all child tags are now correctly rendered (before, only the first child was rendered).

3.5.8

When using <a>Link</a> without href, set the Target to "" instead of "undefined"

3.5.7

Handle multiple occurences of noBreakHyphen in same tag

3.5.6

Handle noBreakHyphen

3.5.5

Improve whitespace support.

3.5.4

  • Fix rendering of space between tags for inline tags too {~html}, for example :
<p><b>Foo</b> <u>Bar</u></p>

will now correctly render "Foo Bar" instead of "Foobar"

3.5.3

  • Fix rendering of space between tags for block tags, eg {~~html}, for example :
<p><b>Foo</b> <u>Bar</u></p>

will now correctly render "Foo Bar" instead of "Foobar"

3.5.2

  • Add possibility to customize styles for nested <ul>,

eg :

this.options.styleTransformer = function(tags) {
    tags.ul.data.pStyle = ["ListBullet", "ListBullet2", "ListBullet3"];
    tags.ul.data.useNumPr = false;
    return tags;
};

This will set the "ListBullet" for level 0 of <ul>, "ListBullet2" for level 1 and so on.

3.5.1

  • Add possibility to customize styles for BulletList with styleTransformer

3.5.0

  • Add option styleTransformer to customize styles.
  • Do not set <w:spacing w:before="0" w:after="0"/> for each paragraph, but use the one that is set in the paragraph containing the {~~blockTag}, if present.

This release needs version 3.1.11 of docxtemplater.

3.4.5

Bugfix issue with styles of TextBody or BodyText being wrongly changed.

3.4.4

Bugfix issue with bullet lists no more appearing

3.4.3

  • Fix issue with duplicate list content when using <ul><li><em>Test</em> after</li></ul>
  • All html escapes are now currently handled, including &#xA0, &and;, and all html handled escapes

3.4.2

  • Add support for text-align:center and text-align:right
  • Add correct styles for h5 and h6

3.4.1

  • Handle escapes such as &quot; &amp; &#x27; &gt; &lt;

3.4.0

  • Add possibility to ignore unknown tags with an option
  • Add support for <sub> and <sup>

3.3.3

Add support for style="text-decoration: underline"

3.3.2

Handle nested ul/li:

<ul>
    <li>Foo</li>
    <li>
        <ul>
            <li>Nested 1</li>
            <li>Nested 2</li>
        </ul>
    </li>
</ul>

3.3.1

Multiple fixes for tables :

Add support for tables that have :

  • no <tbody>, and directly <tr>
  • <thead> or <tfoot>
  • <th> instead of <td>

Also, allow td to be empty, for example :

<table><tr><td>First</td><td></td><td>Third</td></tr></table>

Fixes links containing dom children to be shown as "undefined", for example :

<a href="https://ddg.gg">Foobar <span>Foo</span></a>

3.3.0

Make it possible to add paragraphs nested inside paragraphs, for example :

```

Paragraph1

Paragraph2

Paragraph3

```

Fix issues with &amp; and others not getting decoded

3.2.1

Add support for background-color on p element. It uses the fill property of word, which sets the background-color for a full paragraph.

3.2.0

Add auto wrapping of inline elements in block-elements, so that <span>Foobar</span> is also valid in {~~blockElement}. Also, this makes it possible to use <td>Foobar</td> (the wrapping of the

is done for you).

3.1.4

Add support for inline style background-color:blue

3.1.3

Fixes following error in version 3.1.2 : "Cannot find module '../static/styles.json'"

3.1.2 [WIPED](Please use 3.1.3)

Bugfix when using multiple <ol>, the numbering is reset correctly for each <ol>

3.1.1

Bugfixes when using elements other than <p> inside a <td> (eg now <ul> works)

3.1.0

Bugfixes when using :

  • table inside table
  • multiple lists (<ul>, <li>)
  • multiple links to same Target

3.0.12

Fix bug when using tags inside lists, for example, <ul><li><i>Foo</i></li></ul> now works as expected

3.0.11

Update rendering of <ol> to use the default symbol.

3.0.10

Do not change style of Title, Heading1 - Heading6 of current document

3.0.9

Add support for <input type="checkbox"> and <input type="checkbox" checked>

3.0.8

Fix right borders for tables

3.0.7

Fix corrupted documents with some templates

3.0.6

Add support for <a href="URL">LinkText</a>

3.0.5

Add support for inline style color:#ef0000

3.0.4

Keep word-run style for inline replacement. For example if, the text that the {~html} tag is written in is red, it will also be the base style for the generated elements of the html tag.

3.0.3

Keep existing style. For example, if the html is : <p>Foobar</p>, the text should be styled the same as the rest of the document.

3.0.2

Add support for ol,ul and li tags

3.0.1

Update demo and readme

3.0.0

Initial release

Edgar Hipp

I'm the creator of docxtemplater. I work on making docxtemplater great since 2013.