Section:

Generate PDF using JavaScript

Overview

Apryse's office template generation framework enables the dynamic generation of PDFs:

  • You provide a template in the form of an Office document (such as .docx)
  • You provide replacement data in JSON form
  • Apryse SDK will efficiently generate a PDF by merging the data with the template
  • Fully featured, with support for loops, conditionals, images, table generation, etc.
  • Use your preferred office editor to design attractive templates, and Apryse will take care of the rest
  • All logic is entirely contained within the SDK, with no external dependencies

Easy to use

The generation framework requires minimal code to get up and running. Either class applyTemplateValues to the currently loaded document or pass in templateValues when calling officeToPDFBuffer.

JavaScript

1WebViewer(...)
2.then(instance => {
3
4	instance.loadDocument('template-document.docx', {
5		officeOptions: {
6			doTemplatePrep: true
7		}
8	});
9
10	const { documentViewer } = instance.Core;
11	documentViewer.on('documentLoaded', () => {
12		const doc = documentViewer.getDocument();
13
14		// it is possible to extract document template keys in WebViewer
15		const keys = doc.getTemplateKeys();
16
17		// create an options object and add your template
18		// replacement values to it
19		const options = {};
20		for (const i in keys) {
21			options[keys[i]] = json_data_string;
22		}
23
24		// apply the template values to the currently loaded document in WebViewer
25		await documentViewer.getDocument().applyTemplateValues(options);
26	});
27});

Alternatively, without a viewer:

JavaScript

1Core.office2PDFBuffer(documentPath, {
2	officeOptions: {
3		templateValues: {
4			// keys and values here
5		}
6	}
7}).then(buffer => {
8	saveByteArray('generated_document.pdf', buffer);
9});

Examples

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

Simple text replacement (.docx, .json)

Tags in the template document are replaced with a string from the supplied JSON. To control the style of the text, simply modify the style of the template tag as desired:

Apryse Docs Image

JSON

1{
2	"short_text": "Lorem ipsum dolor, .etc"
3}

Automatic reflow (.docx, .json)

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.

Apryse Docs Image

JSON

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}

Dynamic tables (.docx, .json)

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

Apryse Docs Image

JavaScript

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 (.docx, .json)

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.

Apryse Docs Image

JSON

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

Reflow around figures (.docx, .json)

Automatically flow text around obstacles according to the template.

Apryse Docs Image

JSON

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

Apryse benefits

  • Securely merge data directly in your application. No need to share confidential data with anyone!
  • Use familiar tools (any word processor such as MS Word or Google Docs) to design professional looking templates with no plugins or extra tools required
  • Prevent server bottlenecks by generating documents on the fly directly in the browser
  • Embed the document viewing experience directly into your solution
  • Top quality PDF generation of your templates with the market leading Apryse SDK
  • Self-contained, with no third-party dependencies
  • Generated PDFs have automatically generated accessibility tags

Further Reading

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales