Html-xlsx module

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>
,  and  tags
,  and  tags
<ul>, <ol>, and <li>
 
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 :

Selector	Example	Example description
.class	.intro	Elements with class="intro"
#id	#firstname	Element with id="firstname"
*	*	All elements
element	p	<p> elements
element, element	div, p	All <div> elements and all <p> elements
element element	div p	<p> elements inside <div> elements
element > element	div > p	<p> elements where the direct parent is a <div> element
element + element	div + 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.10

Use new internal xmlContentTypes API (requires docxtemplater 3.55.1 or higher)

3.2.9

Make this module compatible with xlsx module 3.29.2 and above

3.2.8

In very rare cases, the html-xlsx module could produce output that would show an error message when opened with Excel. This requires version 3.27.5 of the xlsx module.

This version now produces correct documents.

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

{#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>
 
font-size: 15px
color: #770

Bugfix for , , , .

3.0.0

Initial release

HTML-xlsx module