Demo Readme Changelog Buy html module

Summary (version 3.5.5)

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.

Demo

Input Output
Data Code
{
    "html": `<h1>docxtemplater</h1>

<p><strong>docxtemplater</strong> is a library to generate docx/pptx
documents from a docx/pptx template. It can replace {placeholders}
with data and also supports loops and conditions. The templates can be
edited by non-programmers, eg for example your clients.</p>

<p>Installation: <code>npm install docxtemplater</code></p>

<p>If you download the JS from there, you should use <code>new
Docxgen()</code> instead of <code>new Docxtemplater()</code>, because
I do not want to bring in a breaking change on a minor version change
in the docxtemplater-build repository.</p>

<p>If you download the JS from there, you should use <code>new
Docxgen()</code> instead of <code>new Docxtemplater()</code>, because
I do not want to bring in a breaking change on a minor version change
in the docxtemplater-build repository.</p>

<p>I recommend you to use the npm scripts I wrote (which can be found
    in the package.json).</p>

<code> npm install && npm run compile </code>

<p>Your version of docxtemplater will be in /build (minified and non
    minified options) and already include all dependencies</p>

<p>Create the following html</p>

<h2>Similar libraries</h2>

<p>They are a few similar libraries that work with docx, here’s a list
of those I know a bit about:</p>

<h1>Modules</h1>

<p>Functionality can be added with modules. They is yet no doc for the
modules because it is not completely mature yet, but you can open an
issue if you have any question about it.</p>

<p>Here is the list of existing modules:</p>

<h1>Professional Support</h1>

<p>I can give your company support for installing, extending,
answering support questions, or maintainning your app that runs
docxtemplater. You can find my email address on my </p>
`}
const doc = new Docxtemplater();
const inputZip = new JSZip(docX);
doc.loadZip(inputZip)
	.setData(data);
const htmlModule = new HtmlModule({});
doc.attachModule(htmlModule);
const output = doc.render().getZip();

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> tags
  • <p> tags
  • <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> tags
  • <b> tags
  • <i> tags
  • <u> tags
  • <ul> tags
  • <ol> tags
  • <li> tags
  • <span> tags
  • <small> tags
  • <s> tags
  • <strong> tags
  • <em> tags
  • <code> tags
  • <table>, <tr>, <td>, <tbody>, <thead>, <tfoot>, <th> tags
  • <a href="URL">Linktext</a> tags
  • style="color: #bbbbbb" property
  • <input type="checkbox"> and <input type="checkbox" checked>
  • style="background-color: blue" property (for black, blue, cyan, darkBlue, darkGray, darkRed, green, lightGray, magenta, red, white, yellow). This limitation is of microsoft word itself.
  • <sub> and <sup>

Installation:

You will need docxtemplater v3: npm install docxtemplater

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

Usage

Your docx should contain the text: {~html}. You can find a working sample at ./sample.js

  • {~html} is used for inline HTML
  • {~~html} is used for block HTML

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

For example :

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

Option descriptions :

  • ignoreUnknownTags [default=false]: If this option is set to true, and the module finds a tag that it doesn't handle yet, it will not fail but instead make as if the tag was of type <span>
  • styleTransformer makes it possible to rewrite the styles that are used by the HTML module, for example :
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,
});

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

Building

You can build the es6 into js by running npm run compile

Testing

You can test the module with npm test

CHANGELOG

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 :

<div>
<p>Paragraph1</p>
<p>Paragraph2</p>
<p>Paragraph3</p>
</div>

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.