Generate PDFs from a Word Template Using JavaScript

PSPDFKit for Web offers the ability to populate DOCX templates with data. PSPDFKit for Web can be run headlessly for automated generation, or with the document viewer user interface (UI).

Launch Demo

This guide explains how to create a PDF document by merging data into a Word template.

General Principles

Word templating consists of the following elements:

1. A DOCX file that will be used as the template.

2. A template model that contains the placeholder values to replace in the DOCX template.

3. Configuration for the template and model.

Template Model

The template model can be an external JSON file or it can be created programmatically. It must contain:

1. A configuration containing a start delimiter and an end delimiter.

2. At least one placeholder-value pair. The placeholder name must correspond to the placeholder defined in the DOCX template.

Classes, Methods, and Properties

• PSPDFKit.populateDocumentTemplate

• PSPDFKit.TemplateDataToPopulateDocument

Populating a Word Template

PSPDFKit for Web supports replacing placeholder text strings, loops, and dynamic tables. As the amount of content changes, the DOCX template will seamlessly adjust and reflow across pages as needed. Placeholders maintain their initial formatting from the DOCX template.

The first step is to prepare the DOCX template with placeholders. This example uses {{ and }} as the delimiters to define the boundaries of placeholders.

Prepare the data:

const data = {
  config: {
    delimiter: {
      start: "{{",
      end: "}}"
    }
  },
  model: {
    name: "Petey Eff",
    text: "Hello World!",
    amount: "$420.69"
  }
};

Load the DOCX template and replace the placeholders in the DOCX template with the data and obtain the result as an ArrayBuffer containing the resulting DOCX file:

const buffer = await PSPDFKit.populateDocumentTemplate(
  {
    // Other configuration options.
    document: "template.docx"
  },
  data
);

The following image shows what the DOCX file looks like.

Lastly, convert the DOCX file into a PDF. The following example converts it to PDF/A using the PDF/A-1a PSPDFKit.Conformance level. However, you can choose whichever conformance enumeration you prefer:

const pdfBuffer = await PSPDFKit.convertToPdf(
  {
    // Other configuration options.
    document: buffer
  },
  PSPDFKit.Conformance.PDFA1A
);

Using Loops

To create a loop, add an array of objects to the data model. For every object within the array, the loop’s body is replicated during each cycle of the loop when the DOCX and data model are processed. Here’s an example of such a data file:

const data = {
  config: {
    delimiter: {
      start: "{{",
      end: "}}"
    }
  },
  model: {
    loop1: [
      { loopDesc1: "Monday", loopDesc2: "Tuesday" },
      { loopDesc1: "Wednesday", loopDesc2: "Thursday" },
      { loopDesc1: "Friday", loopDesc2: "Saturday" }
    ],
    loop2: [
      { loopDesc: "Red" },
      { loopDesc: "Orange" },
      { loopDesc: "Green" }
    ]
  }
};

Below is an example of such a DOCX template.

For bulleted or numbered lists, the opening placeholder must immediately precede the start of the list, and the closing placeholder must immediately follow the end of the list.

Combining the data with the DOCX template produces the following output.

For an example of combining loops with tables, refer to the Dynamic Table Loop Example below.

Using Conditionals

Conditionals allow a template to dynamically insert and format data based on conditions defined within the template itself. Conditionals can be combined with loops for more complex dynamic documents.

The template syntax for implementing conditionals uses special markers to denote the beginning and end of a conditional block, as well as to indicate the condition being tested:

• #condition — Marks the beginning of a block that should be rendered if the condition is true.

• ^condition — Marks the beginning of a block that should be rendered if the condition is false (the else part).

• /condition — Marks the end of a conditional block.

Here’s an example showing this syntax for an isBlue condition:

{{#isBlue}}Blue{{/isBlue}}{{^isBlue}}Red{{/isBlue}}

{
	config: {
		delimiter: {
			start: "{{",
			end: "}}"
		}
	},
	model: {
		isBlue: true
	}
}

Here’s a more complex example with conditionals.

It’s possible to combine the template above with the following data:

{
	config: {
		delimiter: {
			start: "{{",
			end: "}}"
		}
	},
	model: {
		isConsulting: false,
		consultingField: "N/A",
		scopeExhibit: "Exhibit A",
		startDate: "March 1, 2024",
		endDate: "February 28, 2025",
		autoRenew: true
	}
}

In this case, the output will be the following DOCX, which can then be converted to PDF.

Dynamic Table Loop Example

This example shows three different approaches to using loops for dynamically inserting rows into a table. You can download the DOCX template used in this example.

Using a Model Loaded from a JSON File

In this first approach, you’ll populate the DOCX template with data from a JSON file. You can download the JSON file used in this example:

const data = await fetch("table.json").then((response) =>
  response.json()
);
const docx = await PSPDFKit.populateDocumentTemplate(
  {
    // Other configuration options.
    document: "table.docx"
  },
  data
);

const pdfBuffer = await PSPDFKit.convertToPdf(
  {
    // Other configuration options.
    document: docx
  },
  PSPDFKit.Conformance.PDFA1A
);

Automatic Reflow Example

Text reflow refers to the automatic adjustment of text within a document or display area to ensure it fits within the given space without overflowing or leaving excessive empty space. This process involves moving words and characters to new lines, pages, or columns as needed based on the available width and height of the display area, the font size, and other formatting settings.

Here’s the JSON you’ll use:

{
	"config": {
		"delimiter": {
			"start": "{{",
			"end": "}}"
		}
	},
	"model": {
		"clauses": [
			{
				"clause": "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
			},
			{
				"clause": "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
			},
			{
				"clause": "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
			},
			{
				"clause": "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
			},
			{
				"clause": "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
			}
		],
		"title": "Purchase and Sale Agreement"
	}
}

The example below shows how to generate a PDF from a DOCX template where the content is reflowed into another column by using a data model loaded from a JSON file. For an example of how to create the model programmatically, refer to the Dynamic Table Loop Example above:

data = await fetch("data.json").then((response) => response.json());
const docx = await PSPDFKit.populateDocumentTemplate(
  {
    // Other configuration options.
    document: "reflow.docx"
  },
  data
);

const pdfBuffer = await PSPDFKit.convertToPdf(
  {
    // Other configuration options.
    document: docx
  },
  PSPDFKit.Conformance.PDFA_1A
);