Summary (version 3.1.1) Demo Readme Changelog

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
  • <strong> tags
  • <em> tags
  • <code> tags
  • <table>, <tr>, <td> tags
  • <a href="URL">Linktext</a> tags
  • style="color: #bbbbbb" property
  • <input type="checkbox"> and <input type="checkbox" checked>

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