Important : This module only supports pptx (Powerpoint documents), not docx, see the html if you want to include HTML inside Word documents.
This module currently supports following tags :
<p><h1-h6> with some default sizes for each level, the sizes of the titles can be customized<span><br><ul>, <ol> and <li> for ordered and unordered lists<strong> and <em><a href="URL">Linktext</a><table>, <tr>, <tbody>, β¦And following CSS styles :
colorbackground-colorfont-sizetext-decoration: underlinetext-decoration-colorlist-style-type-dx-list-start-levelmargin-leftpadding-lefttext-align<table> elements:background-colorborder-style: nonecolormargin-right: auto + margin-left: auto => center the tablemargin-bottomalign="center", align="left", align="right" HTML attributes<td> elementswidthbackground-colorvertical-aligntext-alignpadding-leftpadding-rightpadding-toppadding-bottomborder-top, border-left, border-bottom, border-rightborder-top-styleborder-bottom-styleborder-right-styleborder-left-styleborder-top-widthborder-bottom-widthborder-right-widthborder-left-widthborder-top-colorborder-bottom-colorborder-right-colorborder-left-colorborder-colorTo insert HTML :
~ is used for inline HTML, such as : {~html} or {~inlineComment} which will use the "inlineComment" data~~ is used for block HTML, such as : {~~html} or {~~styledParagraphs} which will use the "styledParagraphs" data~~~ is used for shape HTML, such as : {~~~html} or {~~~styledTable} which will use the "styledTable" dataconst HTMLPptxModule = require("docxtemplater-html-pptx-module");
const fs = require("fs");
const doc = new Docxtemplater(zip, {
modules: [new HTMLPptxModule({})],
});
doc.render({ html: "<b>Hello</b>, Foo !" });
const buffer = doc.toBuffer();
fs.writeFile("test.docx", buffer);
<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/html-module.js"></script>
<script>
PizZipUtils.getBinaryContent(
"examples/input.docx",
(error, content) => {
if (error) {
console.error(error);
return;
}
const zip = new PizZip(content);
const doc = new docxtemplater(zip, {
modules: [
new DocxtemplaterPptxHtmlModule({}),
],
});
doc.render({
html: "<p>Hello <b>John</b></p>",
});
const out = doc.toBlob();
saveAs(out, "generated.docx");
}
);
</script>
</html>
It is not possible to mix different types of HTML elements in a single shape.
In the PPTX format, everything is inside a "box" which is techically called a "shape" (XML tag <p:sp>) , and a box can contain either :
The reason for that is that each box is statically positioned (x and y coordinate are set in the powerpoint document), so it is not possible to place a table and an image on the same tag for example because we do not know where we should place the second element.
In a pptx template, the tag {~~html} will be inside one particular box, so it can't generate multiple boxes (or they would overlap, which would be unreadable).
This is why one HTML tag : {~~html} will alway render one box, so for example the following HTML data would throw an error because it mixes tables and paragraphs :
<p>Hello</p>
<table>
<tr>
<td><p>Hello</p></td>
</tr>
</table>
<p>Hello</p>
Sometimes, when you use <ul> in your HTML, bullets might not appear in your generated pptx document.
This happens because the slide master configuration specifies that indented items should not use bullets. The <ul> tags use the indented items of level 2 and above. (Level 1 is used for plain text, without any indentation).
To modify the master slide in PowerPoint:
To insert a table, you'll have to use the "shape" level HTML tag, with three "tilde" symbols, like this :
In your code, you can then write :
doc.render({
myTable: `
<table>
<tr>
<td><p>Hello</p></td>
</tr>
</table>
`,
});
It is possible to set options to the module in its constructor.
The options are as follows :
<span>;To ignore all unknown tags:
const HTMLPptxModule = require("docxtemplater-html-pptx-module");
const doc = new Docxtemplater(zip, {
modules: [
new HTMLPptxModule({
ignoreUnknownTags: true,
}),
],
});
doc.render(/* data */);
It is possible to customize the list-style-type using the following code :
const doc = new Docxtemplater(zip, {
modules: [
new HTMLPptxModule({
styleSheet: `
ul {
list-style-type: "β’";
}
ul ul {
list-style-type: decimal;
}
ul ul ul {
list-style-type: "π₯";
}
ul ul ul ul {
list-style-type: "π¨π¨";
}
ul ul ul ul ul {
list-style-type: "\\1F44D";
/* => will show : π */
}
`,
}),
],
});
doc.render({
html: "<ul><li>List</li><ul><li>Lvl2</li></ul></ul>",
});
We support the following values :
- `none`
- `decimal`
- `lower-alpha`
- `lower-latin`
- `upper-alpha`
- `upper-latin`
- `lower-roman`
- `upper-roman`
- `disc`
- `circle`
- `square`
- `"\\1F44D"` (will show : π)
- `"β’"`
border-collapseThe border-collapse property is ignored in the HTML module.
This is because in PowerPoint, table borders are not collapsibleβeach cell defines its own borders, and only one border can appear between two adjacent cells. You cannot force PowerPoint to render two overlapping borders like in HTML with border-collapse: separate.
As a result, border-collapse has no effect in the PowerPoint context and is effectively meaningless.
If you place a block placeholder in a paragraph, like this
The behavior of this is controlled by the option onInvalidBlock.
The value can be set like this :
const doc = new Docxtemplater(zip, {
modules: [new HTMLModule({ onInvalidBlock: "block" })],
paragraphLoop: true,
linebreaks: true,
});
doc.render({
/* data */
});
The possible values are the following :
"block" which will remove the rest of the paragraph, and render the HTML tag."inline", which will automatially convert that HTML tag into an HTML tag. In that case, HTML block tags such as <table> will not be shown as real tables."error" (default), which will raise a template error.Note that for html-xlsx and html module, the default value for this option is different (they both use the "block" behavior by default).
Add support for onInvalidBlock: "inline" in order to allow a block tag such as {~~html} to be handled as an inline tag (like {~html}) if there is some text on that same paragraph.
onInvalidBlock can be set to "inline", "block", or "error" : "error" is the default value.
Enhance the capability to define table cell width in pixels.
In the past, the following code would lead to a very narrow first column:
<style>
th.first,
td.first {
width: 200px;
}
</style>
<table>
<tr>
<th class="first"></th>
<th>2022</th>
<th>2023</th>
<th>2024</th>
</tr>
</table>
When placing a {~~~html} tag inside a table, that uses some table style, the generated output will now also use the same table style.
Verify that all options specified in the module's constructor are valid by ensuring the types are accurate, using Minizod, a library akin to Zod for type verification.
Fix positioning of generated part if the part contains some <a:extLst><a:ext>. This was quite rare and happened if you put the {~~~tag} inside a table, which is usually not recommended.
Add support for CSS style padding-top, padding-bottom, padding-left, padding-right for table cells.
Bugfix regression of misplaced HTML result when using p:cxnSp (Connection shape)
Add support for CSS style color on <table> elements. In previous versions, it was supported only on <td> elements.
Update to correctly handle numbers for data passed to the html module.
Previously, the following would trigger a stacktrace because the html data was not a string :
const doc = new Docxtemplater(zip, {
paragraphLoop: true,
linebreaks: true,
});
doc.render({
html: 33,
});
Now, the data is first transformed into a string, then interpreted.
Use new internal xmlContentTypes API (requires docxtemplater 3.55.1 or higher)
Improve support of lists : we correctly will use the style from the bullets defined in the master slide if a style is defined there.
Add support for CSS property : -dx-list-start-level: 1 : this will use the lvl="1" as the start level for HTML lists. The default is 0.
Add support for customizing the bullet for your lists using list-style-type.
We're simplifying our CSS custom property prefix from -dxt- to -dx- while maintaining backward compatibility.
-dxt- (still supported)-dx- (now preferred)Previous:
ul li {
-dxt-bullet-indent: 1in;
-dxt-bullet-spacing: 1in;
}
Preferred:
ul li {
-dx-bullet-indent: 1in;
-dx-bullet-spacing: 1in;
}
-dx- for all new code-dxt- code will continue to workFor bulk updates, find -dxt- and replace with -dx-.
Add support for text-decoration-color (on normal text or links) to customize the underline color.
Improve support for star selector.
Make it possible to use prefix from the constructor
Add support for :
<mark> tag to highlight text in yellowbackground-color set on textnullGetter if the value of the data is nullishBugfix of a corruption, when using a {~html} tag that itself is a link, the output document could get corrupted.
It now works correctly.
Add typescript typings to be able to change the module prefix
When having a loop with an inline HTML tag inside it, the following error would sometimes appear :
This error should no more appear, the document should generate correctly now.
Allow to change text color of links using following cod :
const HTMLPptxModule = require("docxtemplater-html-pptx-module");
const doc = new Docxtemplater(zip, {
modules: [
new HTMLPptxModule({
styleSheet: `
a {
color: #f3a;
}
`,
}),
],
});
doc.render({
html: '<a href="https://docxtemplater.com">link</a>',
});
Fix regression : correctly template slideMaster and slideLayout files (if some {placeholders} are present in the slideMaster, those will now be correctly templated).
Add support for vertical-align: bottom (or middle, top).
See this Create React App issue and this @adobe/css-tools issue.
Add support for <figure> and <figcaption> tag (which renders exactly like a div).
Upgrade module to use NodeNext moduleResolution setting. See explanation here
Bugfix to set or get xml attributes correctly, even when using tabs instead of spaces in tags attributes
Set module.priority in order to have no more issues related to module ordering
Add initial support for tables.
To add a table, you need to use a tag with three ~, like this :
const HTMLPptxModule = require("docxtemplater-html-pptx-module");
const doc = new Docxtemplater(zip, {
modules: [
new HTMLPptxModule({
styleSheet: `
tr td,tr th {
border-top: none;
border-left: 6px solid orange;
border-bottom: 4px dashed orange;
}
`,
}),
],
});
doc.render({
html: `
<table>
<tr>
<td>Hello</td>
<td>Foo</td>
</tr>
</table>
`,
});
This initial version supports the following :
colspan and rowspanbackground-colorborder using the stylesheet optionAdd module.clone() internal to make module work well with subsegment module
Bugfix issue when having {~~html} as the title :
The following error was thrown :
Now, the generation happens (no stacktrace thrown).
Add support for margin-left or padding-left on paragraph element.
Correctly keep font-family of existing text used in the {~~html} tag.
Previously, the font-family was lost.
Add support for inline html tag using {~html} (block tag is with {~~html}).
Rename property this.prefix to this.blockPrefix.
Bugfix "Cannot read properties of undefined (reading 'forEach')", when using stylesheet with comments.
Make module compatible with docxtemplater@3.28.0. Please make sure to update docxtemplater to 3.28.0 at the same time you update this module. The internal change made is the use of the new matchers API which fixes bugs that were triggered depending on the order of the modules that are attached to the instance. Now the order of the modules should not matter as expected.
Bugfix issue : TypeError: Cannot read properties of undefined (reading 'getElementsByTagName') in `getSlideLayoutPath when using together with the slides module.
Use @xmldom/xmldom instead of xmldom, see this github issue
Generate files in built with correct filename In previous versions, the filename was always build/docxtemplater.js. Now the filename is build/html-module.js The .min.js file is also created now.
Add typescript definitions for public API
When specifying a color with CSS, in previous versions, if the text containing the {~~html} tag was colored with a theme, the document could be corrupted.
This release fixes the bug, the color is now the right one.
Better handle override of style. Includes a quite big rewrite.
For example, it is now possible to override the color of some text in a given run without producing a corruption and without losing all other formatting on that block of text.
Disallow to pass something other than a string to the stylesheet option (because this option only allows to pass a given global stylesheet)
Bugfix when using together with slides module, it would result in the following error :
Now, loops created with the slides module can contain html-pptx tags
Fix issue with css module :
Now, the module requires only the part that it uses, which removes this error.
Bugfix to ignore <br> at the end of block elements.
Bugfix to render space in inline HTML tag when using : <b>Foo</b> <i>Bar</i>
Bugfix corruption when using ul and li, sometimes, it would return a float value for spcPts
Add way to specify spacing between bullet and text, and indent of bullet with :
ul li {
-dxt-bullet-indent: 1in;
-dxt-bullet-spacing: 1in;
}
Better handle margin-top/margin-bottom for li tags
Declare supportedFileTypes, which allows to use this module with the new docxtemplater constructor which was introduced in docxtemplater 3.17.
Add support for <u>, <sub> and <sup> tag and for style : text-decoration: underlined.
Initial release