You are currently offline, serving cached version

Summary

Important : This module only supports xlsx (Excel documents), not docx, see the html if you want to include HTML inside Word documents.

The module also needs the XLSX module to work.

To achieve that, simply add "~~" in front of your field name. The final syntax should be: {~~myField}

You can then write in your data, the following :

const HTMLXlsxModule = require("docxtemplater-html-xlsx-module");
const doc = new Docxtemplater(zip, {
    modules: [new HTMLXlsxModule({})],
});
doc.render({ myField: "<b>Hello</b>, Foo !" });

Usage

Usage (nodejs)

const HTMLXlsxModule = require("docxtemplater-html-xlsx-module");
const XlsxModule = require("docxtemplater-xlsx-module");
const fs = require("fs");

const doc = new Docxtemplater(zip, {
    modules: [new XlsxModule(), new HTMLXlsxModule({})],
}).render({ html: "<b>Hello</b>, Foo !" });

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

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

Usage (browser)

<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/xlsxmodule.js"></script>
    <script src="build/html-xlsx-module.js"></script>
    <script>
        PizZipUtils.getBinaryContent(
            "examples/input.xlsx",
            function (error, content) {
                if (error) {
                    console.error(error);
                    return;
                }

                const zip = new PizZip(content);
                const doc = new docxtemplater(zip, {
                    modules: [
                        new DocxtemplaterXlsxModule(),
                        new DocxtemplaterXlsxHtmlModule({}),
                    ],
                });

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

Supported tags

This module currently supports:

  • <a href="URL">Linktext</a>
  • <b>, <u> and <i> tags
  • <strong>, <em> and <span> tags
  • <ul>, <ol>, and <li>
  • <br>
  • font-size: 15px
  • color: #770

Styling the full cell

It is possible to style the full cell (changing the background color, text-align or borders).

Use it like this :

{~~html}
const HTMLXlsxModule = require("docxtemplater-html-xlsx-module");
const doc = new Docxtemplater(zip, {
    modules: [new HTMLXlsxModule({})],
});
doc.render({
    myField: {
        html: "<b>Hello</b>, Foo !",
        cellStyle: `
                background-color: #008ff0;
                text-align: right;
                border-bottom: 3px dashed #f0f;
            `,
    },
});

Applying stylesheets

It is possible to add styles to your HTML using CSS.

You can do so using the following code :

const HTMLXlsxModule = require("docxtemplater-html-xlsx-module");
const doc = new Docxtemplater(zip, {
    modules: [
        new HTMLXlsxModule({
            styleSheet: `
            .important {
                font-size: 25px;
                color: black;
                font-weight: bold;
            }
        `,
        }),
    ],
});
doc.render({
    html: "<span class='important'>Hello</span>, Foo !",
});

You can use following selectors currently :

SelectorExampleExample description
.class.introElements with class="intro"
#id#firstnameElement with id="firstname"
**All elements
elementp<p> elements
element, elementdiv, pAll <div> elements and all <p> elements
element elementdiv p<p> elements inside <div> elements
element > elementdiv > p<p> elements where the direct parent is a <div> element
element + elementdiv + p<p> elements that are placed immediately after <div> elements
[attribute][target]Elements with a target attribute
[attribute=value][target=_blank]Elements with target="_blank"

CHANGELOG

3.2.7

Make it possible to use prefix from the constructor

3.2.6

Add typescript typings to be able to change the module prefix

3.2.5

Bugfix to allow to mix together <ol> tags together with <u>, <b> tags.

Previously, the following would result in an error :

doc.render({
    html: `
                <u>Underline</u> Foobar <b>strong</b>
                <ol><li>Todo</li><li>Foobar</li></ol>
                <br>
                <p>X Y Z</p>
                <br>
                <p>O M P</p>
                <ul>
                    <li>Zoo</li>
                    <li>Bax</li>
                </ul>
                <br>
                <br>
                Zaza
   `,
});

It now renders correctly the complete content.

3.2.4

The fix which was theoretically fixed in version 3.2.3 was still present.

The complexity was still O(n²) because the following was used :

// simplified code
const relsDoc = {}; // ...
const links = []; // links will be "https://ddg.gg", ...
function addLink(link) {
    const relationships =
        relsDoc.getElementsByTagName("Relationships")[0];
    const child = relsDoc.createElement("Relationship");
    child.getRelationFromLink(link);
    relationships.appendChild(child);
}
for (let i = 0, len = links.length; i < len; i++) {
    addLink(links[i]);
}

getElementsByTagName is called for each iteration of the loop.

Since getElementsByTagName() needs to check each node in the XML, the more nodes there are, the more time this function takes.

It makes more sense to get the relationships object outside of the addLink function (which then acts as a sort of cache).

Adding 10000 links should take about 2.5 seconds now.

3.2.3

When using the HTML tag and inserting links, there was a performance issue when adding over 1000 links in a document.

The more links you added, the slower it got.

This is now fixed, and the time spent should be proportional to the number of links added (10000 links should still take about 2 seconds). Previously, adding 10000 links could easily take 30 seconds.

3.2.2

  • When including the module using webpack, throw specific error if cssParser could not be loaded.

See this Create React App issue and this @adobe/css-tools issue.

3.2.1

Add support for <figure> and <figcaption> tag (which renders exactly like a div).

3.2.0

Make it possible to style the full cell : border, text-align, background-color;

3.1.11

Bugfix when using special characters in links.

Previously, the following code would produce a corrupt document :

const HTMLXlsxModule = require("docxtemplater-html-xlsx-module");
const XlsxModule = require("docxtemplater-xlsx-module");
const doc = new Docxtemplater(zip, {
    modules: [new XlsxModule(), new HTMLXlsxModule({})],
});
doc.render({
    html: "<a href=\"https://ddg.gg/&gt;''\">&lt; && \"DDG' & &gt; XXX</a>",
});

Now the generated document is valid.

3.1.10

Upgrade module to use NodeNext moduleResolution setting. See explanation here

3.1.9

Bugfix issue when having tag inside "sheetname" (a normal tag, not an HTML tag). The value shown would simply be "true".

3.1.8

Use new resolvedId API => requires docxtemplater@3.43.0

3.1.7

Add support for setting ignoreUnknownTags:true

3.1.6

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

3.1.5

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

3.1.4

Bugfix issue when using expand horizontal loop in xlsx :

TypeError: Cannot read properties of undefined (reading 'fontId')

3.1.3

Bugfix issue when using loop module with HtmlXlsxModule enabled, the following template :

{#items}
{#x}1{/}{#y}2{/y}
{/}

Would produce :

In async mode :

Cannot read properties of undefined (reading 'value')
at ScopeManager.\_getValue (node_modules/docxtemplater/js/scope-manager.js:43:7)"

In sync mode :

Cannot read properties of undefined (reading 'forEach')
at loopOver (js/index.js)

3.1.2

Add module.clone() internal

3.1.1

Bugfix when passing in empty string : "" or blank string : " ".

Previously, the following error was thrown :

Cannot read properties of undefined (reading 'childNodes')

3.1.0

Add support for :

  • <ul>, <ol>, and <li>
  • <br>
  • font-size: 15px
  • color: #770

Bugfix for <strong>, <em>, <i>, <u>.

3.0.0

Initial release

Talk with sales Contact us