Generate PDFs from a DOCX template in JavaScript

WebViewer allows you to generate PDFs from DOCX, XLSX, or PPTX templates. Templates can be created in any application, and replaceable content is defined with {{ curly brackets. The data can be merged from any data source in JSON format. Data merging is happening client-side without any server-side dependencies.

You can watch the video below that walks you through it, or continue to the steps below.

First, we need to load a DOCX template either into the viewer, or into memory.

Download the simple template below to get started with your integration.

The template can be DOCX, XLSX, or PPTX format with {{placeholders}} defined. Placeholders will preserve their original styling and can be replaced with text, images, or tabular data. The content will automatically reflow based on content length and paginate accordingly. You can read more about the template files here.

To load your template file into WebViewer, you can use the loadDocument API.

1WebViewer(...)
2    .then(async instance => {
3        await instance.UI.loadDocument('/template.docx');
4        
5        instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
6            const doc = instance.Core.documentViewer.getDocument();
7        });
8    });

Alternatively, you can load the document into memory like so:

1WebViewer(...)
2    .then(instance => {
3        const doc = await instance.Core.createDocument('/template.docx');
4    });
5

Next, we need to prepare our JSON data that will be injected into the template. The JSON data will replace the {{}} values in the template.

In the sample template you downloaded above, you can see there are three different instances of {{short_text}}. Whatever the value of {{short_text}} is in our JSON data will replace all of these values.

1WebViewer(...)
2    .then(async instance => {
3        await instance.UI.loadDocument('/template.docx');
4        
5        instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
6            const doc = instance.Core.documentViewer.getDocument();
7            
8            const jsonData = {
9                short_text: "This is some text"
10            }
11        });
12    });

In the example above, we are hard coding the data. In a real world application, you would likely dynamically generate this JSON by pulling data from a database or some other data source.

The placeholders can also be automatically detected with API to get the template keys.

1WebViewer(...)
2  .then(instance => {
3    instance.UI.loadDocument('/template.docx');
4
5    const { documentViewer } = instance.Core;
6
7    documentViewer.addEventListener('documentLoaded', async () => {
8        const doc = documentViewer.getDocument();
9
10        const keys = await doc.getTemplateKeys();
11        console.log(keys);
12    });
13  });

Now that our data data is prepared, it is now ready to be merged. This is done by calling applyTemplateValues on the document object.

1WebViewer(...)
2  .then(instance => {
3    instance.UI.loadDocument('/template.docx');
4
5    const { documentViewer } = instance.Core;
6
7    documentViewer.addEventListener('documentLoaded', async () => {
8        const doc = documentViewer.getDocument();
9        
10        const jsonData = {
11            short_text: "This is some text"
12        }
13        
14        await doc.applyTemplateValues(jsonData);
15    });
16  });

If you have already loaded the document in WebViewer, the replacement will happen inline and the generated PDF will be immediately displayed.

If your document hasn't been displayed yet, you can load it in WebViewer by passing it to loadDocument.

1WebViewer(...)
2    .then(instance => {
3        const doc = await instance.Core.createDocument('/template.docx');
4        
5        const jsonData = {
6            short_text: "This is some text"
7        }
8        
9        await doc.applyTemplateValues(jsonData);
10        await instance.UI.loadDocument(doc);
11    });

The following are a series of real examples. For each example, the template source and the json data source are included, so that you can try them out yourself.

Text reflows according to the rules set in the original template file, and will automatically generate extra pages if needed. Make use of column layouts and justification rules. This example uses a list loop with dynamic item renumbering.

1{
2	"legal_heading":"End-User Agreement",
3	"legal_clauses": [
4		{"legal_clause":"Sed ut unde omnis iste natus error sit volup tatem..."},
5		{"legal_clause":"Lorem ipsum dolor sit amet, consec tetuer adipi s..."},
6		{"legal_clause":"pretium quis, sem. Nulla conse quat massa quis eni..."},
7		{"legal_clause":"idunt. Cras dapibus. Vivamus elem entum semper nis..."}
8	]
9}

Dynamically insert or remove rows into tables using loops and conditionals. Table formatting such as row bands are updated. Especially useful for invoice generation.

1{
2	"items": [
3		{"item": "Wireless", "charge": "$42.34"},
4		{"item": "Long Distance", "charge": "$12.55"},
5		{"item": "Data", "charge": "$14.89"}
6	],
7	"balance":"$12.52",
8	"total_due":"$82.30",
9}

Insert images into the text at any location using the image_url value specifier. Images can be resized as desired, and inserted at any position in the original document.

1{
2	"logo":{"image_url":"./logo_red.png", "width":40, "height":40}
3}

Automatically flow text around obstacles according to the template.

1{
2	"long_text": "Sed ut perspiciatis unde omnis iste natus..."
3}

For more information, see the following resources:

Detailed specification of the template generation data model
To find out more details about the specification about the data model

Advanced features
For a specification of advanced features, and greater detail on behavior

Live Web Sample
To try a live sample of template filling using our WebViewer