Open source docxtemplater image module 2

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

This version is a fork from open-docxtemplater-image-module which solved some issues to make it compatible with docxtemplater 3.48.0 - 3.50.0, with limited functionality comparing to the paid version.

Installation

If not already done, install docxtemplater by following its installation guide.

Node.js: after installing docxtemplater, install the open source image module:

npm install open-docxtemplater-image-module

For the browser find builds in build/ directory.

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

npm run compile
npm run browserify
npm run uglify

Usage

Node

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

1//Below the options that will be passed to ImageModule instance
2var opts = {};
3opts.centered = false; //Set to true to always center images
4opts.fileType = "docx"; //Or pptx
5
6//Pass your image loader
7opts.getImage = function (tagValue, tagName) {
8  //tagValue is 'examples/image.png'
9  //tagName is 'image'
10  const image = fs.readFileSync(tagValue);
11  return image;
12};
13
14//Pass the function that return image size
15opts.getSize = function (img, tagValue, tagName) {
16  //tagValue is 'examples/image.png'
17  //tagName is 'image'
18  return [150, 150];
19};
20
21let docxFile;
22try {
23  docxFile = fs.readFileSync("examples/imageExample.docx");
24  console.log("File read successfully!");
25  // You can now work with the docxFile buffer, e.g., save it, send it over HTTP, etc.
26} catch (error) {
27  console.error("Error reading file:", error);
28}
29
30var imageModule = new ImageModule(opts);
31
32// var zip = new JSZip(docxFile);
33var zip = new PizZip(docxFile);
34
35var doc = new Docxtemplater()
36  .attachModule(imageModule)
37  .loadZip(zip)
38  .setData({ image: "examples/image.png" })
39  .render();
40
41var buffer = doc.getZip().generate({ type: "nodebuffer" });
42
43fs.writeFile("examples/output.docx", buffer, (err) => {
44  if (err) {
45    console.error("Error writing file:", err);
46  } else {
47    console.log("File written successfully!");
48  }
49});

Angular

1import { Component } from '@angular/core';
2import Docxtemplater from 'docxtemplater';
3import ImageModule from 'open-docxtemplater-image-module';
4import * as JSZip from 'jszip';
5import { HttpClient } from '@angular/common/http';
6import * as saveAs from 'file-saver';
7
8@Component({
9  selector: 'app-root',
10  templateUrl: './app.component.html',
11  styleUrls: ['./app.component.scss'],
12})
13export class AppComponent {
14  constructor(private http: HttpClient) {}
15
16  loadFile(url: string): Promise<ArrayBuffer | undefined> {
17    return this.http.get(url, { responseType: 'arraybuffer' }).toPromise();
18  }
19
20  async generateDocument() {
21    const docxFile = await this.loadFile('/assets/imageExample.docx');
22    const image = await this.loadFile('/assets/image.png');
23    const image2 = await this.loadFile('/assets/image2.png');
24
25    const images = [image, image2];
26    let index = 0;
27
28    const imageOpts = {
29      getImage: (tagValue: string) => {
30        const returnImage = images[index];
31        index++;
32        return returnImage;
33      },
34      getSize: (img: ArrayBuffer) => {
35        // Default size of the image
36        return [150, 150];
37      },
38    };
39
40    const imageModule = new ImageModule(imageOpts);
41
42    var zip = new JSZip(docxFile);
43    var doc = new Docxtemplater()
44      .loadZip(zip)
45      .setData({ image: 'assets/image.png' })
46      .attachModule(imageModule)
47      .render();
48    const blob = doc.getZip().generate({ type: 'blob' });
49    saveAs(blob, 'output.docx');
50  }
51}

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.

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.