Summary (version 3.1.4)
Demo Readme Changelog Buy this module

This module exposes a tag to add an image from a tag.

This module is available as part of the docxtemplater pro plan.

Demo

Input Output
Data Code
{
    "image": "examples/apple.png"
}
const doc = new Docxtemplater();
const inputZip = new JSZip(docX);
doc.loadZip(inputZip)
	.setData(data);

var opts = {}
opts.centered = false;
opts.getImage=function(tagValue, tagName) {
    return fs.readFileSync(tagValue);
}

opts.getSize=function(img,tagValue, tagName) {
    return [150,150];
}
const imageModule = new ImageModule(opts);
doc.attachModule(imageModule);
const output = doc.render().getZip();

README

This version is only compatible with docxtemplater version 3

Here is a compatibility table :

image-module docxtemplater
version 3.1.0 version 3.1.0
version 1.0.4 version 2.1.5
version 1.0.0 version 2.0.0

Installation:

You will need docxtemplater npm install docxtemplater

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

Usage

Your docx should contain the text: {%image}

var ImageModule=require('docxtemplater-image-module')

var opts = {}
opts.centered = false;
opts.getImage=function(tagValue, tagName) {
    return fs.readFileSync(tagValue);
}

opts.getSize=function(img,tagValue, tagName) {
    return [150,150];
}

var imageModule=new ImageModule(opts);

var zip = new JSZip(content);
var docx=new Docxtemplater()
    .attachModule(imageModule)
    .loadZip(zip)
    .setData({image:'examples/image.png'})
    .render();

var buffer= docx
        .getZip()
        .generate({type:"nodebuffer"});

fs.writeFile("test.docx",buffer);

To understand what img, tagValue, tagName mean, lets take an example :

If your template is :

{%myImage}

and your data:

{
    "myImage":'sampleImage.png'
}

tagValue will be equal to "sampleImage.png", tagName will be equal to "myImage" and img will be what ever the getImage function returned

One of the most useful cases of this is to set the images to be the size of that image.

For this, you will need to install the npm package 'image-size' then, write:

opts = {centered:false}
opts.getImage=function(tagValue) {
    return fs.readFileSync(tagValue,'binary');
}
opts.getSize=function(img) {
   sizeOf=require('image-size');
   sizeObj=sizeOf(img);
   console.log(sizeObj);
   return [sizeObj.width,sizeObj.height];
}
imageModule=new ImageModule(opts);

Centering images

You can center the images using opts.centered=true or by using {%%image} instead of {%image} in your documents

Size and path based on placeholder

You can have customizable image loader using the template's placeholder name.

opts.getImage = function (tagValue, tagName) {
    if(tagName === 'logo')
        return fs.readFileSync(__dirname + '/logos/' + tagValue);

    return fs.readFileSync(__dirname + '/images/' + tagValue);
};

The same thing can be used to customize image size.

opts.getSize = function (img, tagValue, tagName) {
    if(tagName === 'logo')
        return [100, 100];

    return [300, 300];
};

Notice

For the imagereplacer to work, the image tag: {%image} needs to be in its own <w:p>, so that means that you have to put a new line after and before the tag.

Testing

You can test that everything works fine using the command npm test. This will also create some docx files under the root directory that you can open to check if the generation was correct.

Building in the browser

You can build a release for the browser with the following commands

npm install
npm run preversion

You will have build/imagemodule.js.

CHANGELOG

3.1.4

Do not add relationship for files docProps/app.xml and docProps/core.xml

3.1.3

Fix unit tests

3.1.2

Files are no longer corrupted when using the option "center"

3.1.1

The image module now throws an error if the given size is invalid.

3.1.0

  • Breaking : The image module no longer swallows error thrown by options.getImage and options.getSize. It is the implementors responsibility to not throw any errors, or the error will be passed. You can return a falsy value in getImage to not render an image at all.

3.0.2

  • Fix issue with PPTX : Before, you had to add to your options : {fileType: "pptx"} in the module options passed as argument in the constructor of the module. Now, the fileType is retrieved from the main docxtemplater.

3.0.1

  • Add support for PPTX.
  • Add centering of images with {%%image} syntax

3.0.0

  • This version is compatible with docxtemplater 3.0.
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.