Summary (version 3.3.2)
Demo Readme Changelog Buy this 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.

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

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>

Building

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

Testing

You can test the module with npm test

CHANGELOG

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

You can buy only this module by using following link : Buy this module

Edgar Hipp

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