Home

All Blogs

How to Use a PDF Generation SDK for Creating Invoices

Kevin Herschbach

Technical Content Writer

Published January 30, 2026

Updated March 11, 2026

13 min

How to Use a PDF Generation SDK for Creating Invoices

Kevin Herschbach

Technical Content Writer

pdf

template

automated document generation

apryse webviewer

The ability to dynamically generate professional invoices from structured data is essential for businesses of all sizes. The challenge lies in creating a maintainable system where business users can update invoice layouts without touching code, where data flows seamlessly into templates, and where the output looks perfect every time.

Template-based PDF generation solves this problem by separating your data from your document design. With the right SDK, you can define invoice layouts in familiar tools like Microsoft Word, then programmatically populate them with real-time data.

In this tutorial, you'll learn how to generate professional invoice PDFs using a template-based PDF generation SDK for invoices with Apryse WebViewer. You’ll take an invoice layout, populate it with structured data in a JavaScript application, and generate a polished PDF; without hardcoding layouts or touching design logic in code.

To achieve this, you'll follow these steps:

Set up your project
Create the HTML and CSS
Implement the invoice generation

The result will look like this:

A screenshot of the invoice being generated with the use of templates

The invoice's text fields are automatically populated with the data entered into the web form

Prerequisites

Copied to clipboard

In this demonstration, you'll use npm as your runtime environment and package manager to install WebViewer SDK v11.10.0. This SDK version is compatible with Node.js 8 through 24.

You can check your installed Node.js version by running node --version.

Step 1: Set Up Your Project

Copied to clipboard

In your project directory, create a package.json by running npm init -y, then install the WebViewer SDK.

npm install @pdftron/webviewer

In your project root, create a new directory public with a sub-directory lib that in turn contains a sub-directory webviewer.

mkdir -p public/lib/webviewer

Next, in node_modules/@pdftron/webviewer/public, locate the directories core, ui, and the file webviewer.min.js. Copy them into your newly created directory public/lib/webviewer.

cp -R node_modules/@pdftron/webviewer/public/core node_modules/@pdftron/webviewer/public/ui node_modules/@pdftron/webviewer/webviewer.min.js public/lib/webviewer/

Your public directory's structure should now look like this:

public
└── lib
    └── webviewer
        ├── core
        		└── ... 
        ├── ui
        		└── ...
        └── webviewer.min.js

Step 2: Create the HTML and CSS

Copied to clipboard

In the public directory, create a basic index.html that imports webviewer.min.js. You'll extend the code in the next step.

<html>
<head>
  <title>PDF Generator for Invoices</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="index.css">
</head>

<!-- Import WebViewer as a script tag -->
<script src='/lib/webviewer/webviewer.min.js'></script>

<body>
  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
</body>
</html>

Also in the public directory, create an index.css file to apply some styling:

/* side-by-side divs */
.vertical-container {
    display: inline-block;
    vertical-align: top;
}

/* General Button Styles */
.btn {
    background-color: #007bff;
    margin: 0 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
}

.btn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* Delete Button Styles */
.btn-delete {
    background-color: red;
    padding: 0 5px;
    color: white
}

/* Responsive Design */
@media (max-width: 768px) {
    .btn {
        width: 100%;
        margin: 5px 0;
    }
}

Step 3: Implement the Invoice Generation

Copied to clipboard

Now you'll create an interactive invoice generator. It takes input from a web form filled out by the user and automatically injects those values into a Word document (.docx) template. It then generates an invoice from that template, which the user can download as a PDF.

To implement this, you can copy the sample code from the documentation and use it inside script tags in your index.html file's body. Make sure to generate a free trial license key from the same page first, which will be added to the sample code automatically.

⚠️ One important thing to change is the path to the WebViewer assets you copied earlier. Instead of path: '/lib', it should say path: '/lib/webviewer' to reflect your directory structure.

  // Initialize WebViewer.
  WebViewer({
    // Update the path 👇
    path: '/lib/webviewer',
    licenseKey: 'YOUR_LICENSE_KEY',
  }, element).then((instance) => {
    documentViewer = instance.Core.documentViewer;
    loadTemplateDocument(); // Load the default template document, initialize sample data, and generate input fields.
  });

Also note that the sample code uses the template file invoice_template.docx. Feel free to take a closer look at its template keys to better understand their relationship with the data they'll be populated with.

After implementing the sample code, your final index.html will look like this:

Let's break down the code.

Global Variables

Copied to clipboard

const element = document.getElementById('viewer');
let documentViewer = null;
let sampleData = {};
let templateApplied = false;
const defaultDoc = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/invoice_template.docx';

element: Grabs the viewer div
documentViewer: Will hold the WebViewer instance (starts as null, gets set later)
sampleData: Will store all the invoice data (numbers, names, items)
templateApplied: A flag to track whether the template has already been filled (starts false)
defaultDoc: URL to the invoice template

Initializing WebViewer

Copied to clipboard

WebViewer({
  path: '/lib/webviewer',
  licenseKey: 'YOUR_LICENSE_KEY',
}, element).then((instance) => {
  documentViewer = instance.Core.documentViewer;
  loadTemplateDocument();
});

WebViewer({ ... }, element): Creates a new WebViewer instance
.then((instance) => { ... }): Runs after WebViewer finishes loading
loadTemplateDocument(): Immediately loads the default template

Loading the Template

Copied to clipboard

const loadTemplateDocument = async () => {
  // Load DOCX template.
  await documentViewer.loadDocument(defaultDoc, {extension: 'docx'});
  templateApplied = false;
  
  // Initialize sample data.
  sampleData = {
    invoice_number: '3467821',
    bill_to_name: 'Victoria Gutiérrez',
    ship_to_name: 'María Rosales',
    items: [
      { description: 'Item 1', qty: '1', price: '10.00', total: '10.00' },
      { description: 'Item 2', qty: '20', price: '20.00', total: '400.00' },
      { description: 'Item 3', qty: '1', price: '0.00', total: '0.00' },
      { description: 'Item 4', qty: '1', price: '0.00', total: '0.00' },
    ],
    subtotal: '410.00',
    sales_tax_rate: '5.0%',
    sales_t: '20.50',
    total_t: '500.00',
  };
  
  generateInputFields();
};

async: Makes this function asynchronous so it can wait for the document to load
await documentViewer.loadDocument(...): Loads the DOCX file from the URL
templateApplied = false: Resets the flag
sampleData = { ... }: Creates default invoice data
generateInputFields(): Creates the input form based on this data

Filling the Template

Copied to clipboard

const fillTemplate = async () => {
  // Update sampleData from the input field values.
  Object.keys(sampleData).forEach(key => {
    if (Array.isArray(sampleData[key])) {
      // Array field items
      sampleData[key].forEach((item, index) => {
        Object.keys(item).forEach(subKey => {
          const input = document.getElementById(`${key}_${index}_${subKey}`.toLowerCase());
          sampleData[key][index][subKey] = input.value;
        });
      });
    }
    else {
      // Non-array (fixed) fields
      const input = document.getElementById(key.toLowerCase());
      sampleData[key] = input.value;
    }
  });
  
  // Apply JSON data to the PDF.
  if(templateApplied)
    await documentViewer.loadDocument(defaultDoc, {extension: 'docx'});
  await documentViewer.getDocument().applyTemplateValues(sampleData);
  templateApplied = true;
};

Generating Input Fields

Copied to clipboard

This is the most complex function. Let's break it into smaller pieces.

Setup

Copied to clipboard

const generateInputFields = () => {
  // Clear previous controls from the 2 divs.
  leftDiv.innerHTML = rightDiv.innerHTML = '';

Empties both divs before creating new inputs
This enables regenerating the form when items are added/deleted

Processing Each Field

Copied to clipboard

Object.keys(sampleData).forEach(key => {

Loops through every property in sampleData
key will be: "invoice_number", "bill_to_name", "items", "subtotal", etc.

Handling Array Fields

Copied to clipboard

if (Array.isArray(sampleData[key])) {
  sampleData[key].forEach((item, index) => {

Checks if the field is an array (only "items" is)
Loops through each item (index 0, 1, 2, 3...)

Creating the Header Row

Copied to clipboard

if (index === 0) {
  Object.keys(item).forEach(subKey => {
    const desc = document.createElement('input');
    desc.type = 'text';
    desc.disabled = true;
    desc.value = subKey || '';
    rightDiv.appendChild(desc);
  });
  rightDiv.appendChild(document.createElement('br'));
}

Only runs for the first item (index === 0)
Creates disabled input fields showing column names: "description", "qty", "price", "total"
Adds a line break <br> after the header

Creating Data Rows

Copied to clipboard

Object.keys(item).forEach(subKey => {
  const input = document.createElement('input');
  input.id = `${key}_${index}_${subKey}`.toLowerCase();
  input.type = 'text';
  input.value = item[subKey] || '';
  rightDiv.appendChild(input);
});

Creates 4 inputs with IDs
Example for item #1:
- items_0_description (value: "Item 1")
- items_0_qty (value: "1")
- items_0_price (value: "10.00")
- items_0_total (value: "10.00")

Adding Delete Buttons

Copied to clipboard

const deleteButton = document.createElement('button');
deleteButton.textContent = '\u2716'; // ✖ symbol
deleteButton.className = 'btn-delete';
deleteButton.onclick = () => {
  sampleData[key].splice(index, 1);
  generateInputFields();
}
rightDiv.appendChild(deleteButton);
rightDiv.appendChild(document.createElement('br'));

Creates a button with an ✖ symbol for each row
When clicked:
- splice(index, 1) removes that item from the array
- generateInputFields() rebuilds the entire form (now with one fewer row)
Adds a line break after each row

Handling Simple Fields

Copied to clipboard

else {
  const desc = document.createElement('input');
  desc.disabled = true;
  desc.type = 'text';
  desc.value = key + ': ';
  leftDiv.appendChild(desc);
  
  const input = document.createElement('input');
  input.type = 'text';
  input.value = sampleData[key] || '';
  input.id = key.toLowerCase();
  leftDiv.appendChild(input);
  leftDiv.appendChild(document.createElement('br'));
}

For each simple field like invoice_number:
- Label input (disabled):
  - Shows "invoice_number: " as a label
  - Disabled so the user can't edit it
- Value input (editable):
- ID: invoice_number
  - Pre-filled with the current value
  - The user can edit this
- Line break: Moves to next line

Add Row Button

Copied to clipboard

const addRowButton = document.createElement('button');
addRowButton.textContent = 'Add Row';
addRowButton.className = 'btn';
addRowButton.onclick = () => {
  const randQty = Math.floor(Math.random() * 20) + 1;
  sampleData.items.push({
    description: `Item ${sampleData.items.length + 1}`,
    qty: randQty.toString(),
    price: '0.00',
    total: '0.00'
  });
  generateInputFields();
};
addRowButton.disabled = sampleData.items.length >= 10;
rightDiv.appendChild(addRowButton);

Creates an "Add Row" button
When clicked:
- Generates a random quantity (1-20)
- Adds a new item to the array with default values
- Rebuilds the form to show the new row
The button is disabled if there are already 10 items (prevents infinite rows)

Creating the UI Layout

Copied to clipboard

const controlsContainer = document.createElement('div');

const leftDiv = document.createElement('div');
const rightDiv = document.createElement('div');
leftDiv.className = rightDiv.className = 'vertical-container';
leftDiv.style.width = "40%";
rightDiv.style.width = "60%";

controlsContainer.appendChild(leftDiv);
controlsContainer.appendChild(rightDiv);

Sets up the container

const fillInvoiceButton = document.createElement('button');
fillInvoiceButton.className = 'btn';
fillInvoiceButton.textContent = 'Fill Template';
fillInvoiceButton.onclick = async () => {
  await fillTemplate();
};
controlsContainer.appendChild(fillInvoiceButton);

Sets up the "Fill Template" button
When clicked, runs fillTemplate() to generate the invoice

const resetDocumentButton = document.createElement('button');
resetDocumentButton.className = 'btn';
resetDocumentButton.textContent = '🗘 Reset Document';
resetDocumentButton.onclick = async () => {
  await loadTemplateDocument();
};
controlsContainer.appendChild(resetDocumentButton);

Sets up the "Reset Document" button
When clicked, reloads everything from scratch

element.insertBefore(controlsContainer, element.firstChild);

Puts the controls above the document viewer
insertBefore(new, existing) inserts the new element before the existing one

Test Your Invoice PDF Generator

Copied to clipboard

Now go ahead and test the app.

npx http-server -a localhost

At the top, you can see the web form to be filled out by the user. The data entered there will populate the template keys in the invoice document below when you click on the "Fill Template" button.

To download the invoice as a PDF, click on the hamburger menu in the top left of WebViewer and select "Download".

Screenshot of the finished invoice PDF generator web app

The document templates take the data from the web form and populate the invoice fields with it

Learn how to automate invoice recognition and data extraction in C# using template-based workflows.

Conclusion

Copied to clipboard

In this tutorial, you've integrated PDF generation for invoices using the Apryse WebViewer SDK's template feature.

However, template-based PDF generation is not restricted to invoices. You can use any data in JSON format to generate any kind of PDF by defining your own template keys. Take a look at the SDK documentation's Data Model page for more details.

To explore more of what the Apryse SDK has to offer, check out its documentation and the various samples. Begin your free trial or contact our sales team to get started.

View all blogs

How to Solve Six Common Problems when Getting Started with Apryse WebViewer

From Ink to Insight: Handwriting Recognition with the Apryse SDK

2026 May 08

ICR vs OCR: What's the Difference and When Does It Matter?

2026 May 08

How to Use a PDF Generation SDK for Creating Invoices

Table Of Contents

Prerequisites

Step 1: Set Up Your Project

Step 2: Create the HTML and CSS

Step 3: Implement the Invoice Generation

Global Variables

Initializing WebViewer

Loading the Template

Filling the Template

Generating Input Fields

Setup

Processing Each Field

Handling Array Fields

Creating the Header Row

Creating Data Rows

Adding Delete Buttons

Handling Simple Fields

Add Row Button

Creating the UI Layout

Test Your Invoice PDF Generator

Conclusion

Related Articles

View all blogs

How to Solve Six Common Problems when Getting Started with Apryse WebViewer

From Ink to Insight: Handwriting Recognition with the Apryse SDK

ICR vs OCR: What's the Difference and When Does It Matter?