npmpackage.info

Gathering detailed insights and metrics for yx-docxtemplater-image-module-free

yx-docxtemplater-image-module-free - 1.1.1 | npmpackage.info

yx-docxtemplater-image-module-free

Open Source Image Module for docxtemplater

1.1.1

NOASSERTION

JavaScript

257.28 kB

1.7

Installations

npm install yx-docxtemplater-image-module-free

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.14.2

NPM Version

8.5.0 Pull Requests

Open

0

Total

2

Closed

2

Issues

Open

16

Total

16

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

evilc0des

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

NOASSERTION License

60 Stars

162 Commits

46 Forks

3 Watchers

2 Branches

1 Contributors

Updated on Jun 26, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.1.1

Package Id

yx-docxtemplater-image-module-free@1.1.1

Unpacked Size

257.28 kB

Size

65.06 kB

File Count

NPM Version

8.5.0

Node Version

16.14.2

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

xmldom

Dev Dependencies

babel-cli babel-eslint babel-preset-es2015 browserify chai docxtemplater eslint image-size istanbul jszip mkdirp mocha rimraf uglifyjs

Open Source docxtemplater image module

This repository holds an maintained version of docxtemplater image module.

This package is open source. There is also a paid version maintained by docxtemplater author.

Note this version is compatible with docxtemplater 3.x.

Installation

You first need to install docxtemplater by following its installation guide.

For Node.js install this package:

1npm install docxtemplater-image-module-free

For the browser find builds in build/ directory.

Alternatively, you can create your own build from the sources:

1npm run compile
2npm run browserify
3npm run uglify

Usage

Assuming your docx or pptx template contains only the text {%image}:

1//Node.js example
2var ImageModule = require('open-docxtemplater-image-module');
3
4//Below the options that will be passed to ImageModule instance
5var opts = {}
6opts.centered = false; //Set to true to always center images
7opts.fileType = "docx"; //Or pptx
8
9//Pass your image loader
10opts.getImage = function(tagValue, tagName) {
11    //tagValue is 'examples/image.png'
12    //tagName is 'image'
13    return fs.readFileSync(tagValue);
14}
15
16//Pass the function that return image size
17opts.getSize = function(img, tagValue, tagName) {
18    //img is the image returned by opts.getImage()
19    //tagValue is 'examples/image.png'
20    //tagName is 'image'
21    //tip: you can use node module 'image-size' here
22    return [150, 150];
23}
24
25var imageModule = new ImageModule(opts);
26
27var zip = new JSZip(content);
28var doc = new Docxtemplater()
29    .attachModule(imageModule)
30    .loadZip(zip)
31    .setData({image: 'examples/image.png'})
32    .render();
33
34var buffer = doc
35        .getZip()
36        .generate({type:"nodebuffer"});
37
38fs.writeFile("test.docx",buffer);

Some notes regarding templates:

docx files: the placeholder {%image} must be in a dedicated paragraph.
pptx files: the placeholder {%image} must be in a dedicated text cell.

In the browser, this shows how to get the image asynchronously :

1<html>
2<script src="node_modules/docxtemplater/build/docxtemplater.js"></script>
3<script src="node_modules/jszip/dist/jszip.js"></script>
4<script src="node_modules/jszip/vendor/FileSaver.js"></script>
5<script src="node_modules/jszip-utils/dist/jszip-utils.js"></script>
6<script src="build/imagemodule.js"></script>
7<script>
8  JSZipUtils.getBinaryContent('examples/image-example.docx', function (error, content) {
9    if (error) {
10      console.error(error);
11      return;
12    }
13    var opts = {}
14    opts.centered = false;
15    opts.getImage = function (tagValue, tagName) {
16      return new Promise(function (resolve, reject) {
17        JSZipUtils.getBinaryContent(tagValue, function (error, content) {
18          if (error) {
19            return reject(error);
20          }
21          return resolve(content);
22        });
23      });
24    }
25    opts.getSize = function (img, tagValue, tagName) {
26      // FOR FIXED SIZE IMAGE :
27      return [150, 150];
28
29      // FOR IMAGE COMING FROM A URL (IF TAGVALUE IS AN ADRESS) :
30      // To use this feature, you have to be using docxtemplater async
31      // (if you are calling setData(), you are not using async).
32      return new Promise(function (resolve, reject) {
33        var image = new Image();
34        image.src = url;
35        image.onload = function () {
36          resolve([image.width, image.height]);
37        };
38        image.onerror = function (e) {
39          console.log('img, tagValue, tagName : ', img, tagValue, tagName);
40          alert("An error occured while loading " + tagValue);
41          reject(e);
42        }
43      });
44    }
45
46    var imageModule = new ImageModule(opts);
47
48    var zip = new JSZip(content);
49    var doc = new docxtemplater()
50      .loadZip(zip)
51      .attachModule(imageModule)
52      .compile();
53
54    doc.resolveData({
55      image: 'examples/image.png'
56    }).then(function () {
57      console.log('ready');
58      doc.render();
59      var out = doc.getZip().generate({
60        type: "blob",
61        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
62      });
63      saveAs(out, "generated.docx");
64    })
65  });
66</script>
67
68</html>

Centering images

You can center all images by setting the global switch to true opts.centered = true.

If you would like to choose which images should be centered one by one:

Set the global switch to false opts.centered = false.
Use {%image} for images that shouldn't be centered.
Use {%%image} for images that you would like to see centered.

In pptx generated documents, images are centered vertically and horizontally relative to the parent cell.

Async support

It is possible to get images asynchronously by returning a Promise in the getImage function and use the docxtemplater async api : http://docxtemplater.readthedocs.io/en/latest/async.html

You can also return a promise in the getSize function if you want to resolve the size asynchronously (like in the browser example above).

Here is an example in node that allows you to retrieve values from an URL and use a fixed width, and keep the aspect ratio.

1const fs = require("fs");
2const DocxTemplater = require("docxtemplater");
3const https = require("https");
4const Stream = require("stream").Transform;
5
6const ImageModule = require("./es6");
7const JSZip = require("jszip");
8
9const content = fs.readFileSync("demo_template.docx");
10
11const data = {
12  image: "https://docxtemplater.com/xt-pro.png"
13};
14
15const opts = {};
16opts.getImage = function (tagValue, tagName) {
17  console.log(tagValue, tagName);
18  // tagValue is "https://docxtemplater.com/xt-pro-white.png" and tagName is "image"
19  return new Promise(function (resolve, reject) {
20    getHttpData(tagValue, function (err, data) {
21      if (err) {
22        return reject(err);
23      }
24      resolve(data);
25    });
26  });
27};
28
29opts.getSize = function (img, tagValue, tagName) {
30  console.log(tagValue, tagName);
31  // img is the value that was returned by getImage
32  // This is to force the width to 600px, but keep the same aspect ration
33  const sizeOf = require("image-size");
34  const sizeObj = sizeOf(img);
35  console.log(sizeObj);
36  const forceWidth = 600;
37  const ratio = forceWidth / sizeObj.width;
38  return [
39    forceWidth,
40    // calculate height taking into account aspect ratio
41    Math.round(sizeObj.height * ratio),
42  ];
43};
44
45const imageModule = new ImageModule(opts);
46
47const zip = new JSZip(content);
48const doc = new DocxTemplater()
49  .loadZip(zip)
50  .attachModule(imageModule)
51  .compile();
52
53doc
54  .resolveData(data)
55  .then(function () {
56    console.log("data resolved");
57    doc.render();
58    const buffer = doc
59      .getZip()
60      .generate({
61        type: "nodebuffer",
62        compression: "DEFLATE"
63      });
64
65    fs.writeFileSync("test.docx", buffer);
66    console.log("rendered");
67  })
68  .catch(function (error) {
69    console.log("An error occured", error);
70  });
71
72function getHttpData(url, callback) {
73  https
74    .request(url, function (response) {
75      if (response.statusCode !== 200) {
76        return callback(
77          new Error(
78            `Request to ${url} failed, status code: ${response.statusCode}`
79          )
80        );
81      }
82
83      const data = new Stream();
84      response.on("data", function (chunk) {
85        data.push(chunk);
86      });
87      response.on("end", function () {
88        callback(null, data.read());
89      });
90      response.on("error", function (e) {
91        callback(e);
92      });
93    })
94    .end();
95}

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];
};

Base64 include

You can use base64 images with the following code:

1function base64DataURLToArrayBuffer(dataURL) {
2  const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
3  if (!base64Regex.test(dataURL)) {
4    return false;
5  }
6  const stringBase64 = dataURL.replace(base64Regex, "");
7  let binaryString;
8  if (typeof window !== "undefined") {
9    binaryString = window.atob(stringBase64);
10  } else {
11    binaryString = new Buffer(stringBase64, "base64").toString("binary");
12  }
13  const len = binaryString.length;
14  const bytes = new Uint8Array(len);
15  for (let i = 0; i < len; i++) {
16    const ascii = binaryString.charCodeAt(i);
17    bytes[i] = ascii;
18  }
19  return bytes.buffer;
20}
21const imageOpts = {
22  getImage(tag) {
23    return base64DataURLToArrayBuffer(tag);
24  },
25  getSize() {
26    return [100, 100];
27  },
28};
29doc.attachModule(new ImageModule(imageOpts));

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

74 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-jg8v-48h5-wgxg
Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883

Score

1.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More