How to Use a PDF Generation SDK for Creating Invoices

By Kevin Herschbach | 2026 Jan 30

13 min

Prerequisites

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

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

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

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

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

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

Setup

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

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

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

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

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

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

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

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

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

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.

Tags

pdf

template

automated document generation

apryse webviewer

Kevin Herschbach

Technical Content Writer

Share this post

<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>
  <script>
  // Global variables
  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';

  // Initialize WebViewer.
  WebViewer({
    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.
  });

  // Load default template document and initialize sample data.
  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\u00e9rrez',
      ship_to_name: 'Mar\u00eda 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(); // Generate input fields based on default sampleData values.
  };

  const fillTemplate = async () => {
    // Update sampleData from the input field values.
    // Each field is identified by its unique ID.
    // The ID was originally generated from sampleData key for the fixed fields, or from (key, index, subKey) for array items.
    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) // Reload the template document if it has already been applied.
      await documentViewer.loadDocument(defaultDoc, {extension: 'docx'});
    await documentViewer.getDocument().applyTemplateValues(sampleData);
    templateApplied = true;
  };

  // Generate input fields based on the sampleData structure.
  // The left div contains the fixed text inputs for non-array fields.
  // The right div contains the dynamic text inputs for array fields (items).
  // Each array item corresponds to a row in the table (loop in the template).
  const generateInputFields = () => {
    // Clear previous controls from the 2 divs.
    leftDiv.innerHTML = rightDiv.innerHTML = '';  
    Object.keys(sampleData).forEach(key => {
      if (Array.isArray(sampleData[key])) {
        // Array field - Create multiple text inputs for each item in the array in the right div.
        sampleData[key].forEach((item, index) => {
          // Create a header row before the first row.
          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'));
          }
          // Create the rows that correspond to each item in the array.
          Object.keys(item).forEach(subKey => {
            const input = document.createElement('input');
            // Generate a unique ID for each input based on the key, index, and subKey.
            input.id = `${key}_${index}_${subKey}`.toLowerCase();
            input.type = 'text';
            input.value = item[subKey] || '';
            rightDiv.appendChild(input);
          });
          // Add a delete button for each row.
          const deleteButton = document.createElement('button');
          deleteButton.textContent = '\u2716'; // Unicode for '✖' symbol
          deleteButton.className = 'btn-delete';
          deleteButton.onclick = () => {
            sampleData[key].splice(index, 1);
            generateInputFields(); // Regenerate the input fields to reflect the deletion.
          }
          rightDiv.appendChild(deleteButton);
          rightDiv.appendChild(document.createElement('br'));
        });
      }
      else {  // Create text input for each field in the left div.
        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] || '';
        // Use the key as the ID for easy lookup later.
        input.id = key.toLowerCase();
        leftDiv.appendChild(input);
        leftDiv.appendChild(document.createElement('br'));
      }
    });
    // Create a button to add a new item to the items array.
    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(); // Regenerate the input fields to reflect the new row.
    };
    addRowButton.disabled = sampleData.items.length >= 10; // Limit to 10 items.
    rightDiv.appendChild(addRowButton);
  }

  // UI section

  // Create a container for the controls.
  const controlsContainer = document.createElement('div');

  // Create 2 divs inside the container for left and right sections.
  const leftDiv = document.createElement('div');
  const rightDiv = document.createElement('div');
  leftDiv.className = rightDiv.className = 'vertical-container'; // Side-by-side divs using (display: inline-block) and (vertical-align: top).
  leftDiv.style.width = "40%";
  rightDiv.style.width = "60%"; // Right div is wider to accommodate table rows.
  controlsContainer.appendChild(leftDiv);
  controlsContainer.appendChild(rightDiv);

  const fillInvoiceButton = document.createElement('button');
  fillInvoiceButton.className = 'btn';
  fillInvoiceButton.textContent = 'Fill Template';
  fillInvoiceButton.onclick = async () => {
    await fillTemplate(); // Generate the invoice by filling the template with data.
  };
  controlsContainer.appendChild(fillInvoiceButton);

  const resetDocumentButton = document.createElement('button');
  resetDocumentButton.className = 'btn';
  resetDocumentButton.textContent = '🗘 Reset Document';
  resetDocumentButton.onclick = async () => {
    await loadTemplateDocument(); // Reset document, data and input fields.
  };
  controlsContainer.appendChild(resetDocumentButton);
  element.insertBefore(controlsContainer, element.firstChild);
  </script>
</body>
</html>

<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>
  <script>
  // Global variables
  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';

  // Initialize WebViewer.
  WebViewer({
    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.
  });

  // Load default template document and initialize sample data.
  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\u00e9rrez',
      ship_to_name: 'Mar\u00eda 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(); // Generate input fields based on default sampleData values.
  };

  const fillTemplate = async () => {
    // Update sampleData from the input field values.
    // Each field is identified by its unique ID.
    // The ID was originally generated from sampleData key for the fixed fields, or from (key, index, subKey) for array items.
    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) // Reload the template document if it has already been applied.
      await documentViewer.loadDocument(defaultDoc, {extension: 'docx'});
    await documentViewer.getDocument().applyTemplateValues(sampleData);
    templateApplied = true;
  };

  // Generate input fields based on the sampleData structure.
  // The left div contains the fixed text inputs for non-array fields.
  // The right div contains the dynamic text inputs for array fields (items).
  // Each array item corresponds to a row in the table (loop in the template).
  const generateInputFields = () => {
    // Clear previous controls from the 2 divs.
    leftDiv.innerHTML = rightDiv.innerHTML = '';  
    Object.keys(sampleData).forEach(key => {
      if (Array.isArray(sampleData[key])) {
        // Array field - Create multiple text inputs for each item in the array in the right div.
        sampleData[key].forEach((item, index) => {
          // Create a header row before the first row.
          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'));
          }
          // Create the rows that correspond to each item in the array.
          Object.keys(item).forEach(subKey => {
            const input = document.createElement('input');
            // Generate a unique ID for each input based on the key, index, and subKey.
            input.id = `${key}_${index}_${subKey}`.toLowerCase();
            input.type = 'text';
            input.value = item[subKey] || '';
            rightDiv.appendChild(input);
          });
          // Add a delete button for each row.
          const deleteButton = document.createElement('button');
          deleteButton.textContent = '\u2716'; // Unicode for '✖' symbol
          deleteButton.className = 'btn-delete';
          deleteButton.onclick = () => {
            sampleData[key].splice(index, 1);
            generateInputFields(); // Regenerate the input fields to reflect the deletion.
          }
          rightDiv.appendChild(deleteButton);
          rightDiv.appendChild(document.createElement('br'));
        });
      }
      else {  // Create text input for each field in the left div.
        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] || '';
        // Use the key as the ID for easy lookup later.
        input.id = key.toLowerCase();
        leftDiv.appendChild(input);
        leftDiv.appendChild(document.createElement('br'));
      }
    });
    // Create a button to add a new item to the items array.
    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(); // Regenerate the input fields to reflect the new row.
    };
    addRowButton.disabled = sampleData.items.length >= 10; // Limit to 10 items.
    rightDiv.appendChild(addRowButton);
  }

  // UI section

  // Create a container for the controls.
  const controlsContainer = document.createElement('div');

  // Create 2 divs inside the container for left and right sections.
  const leftDiv = document.createElement('div');
  const rightDiv = document.createElement('div');
  leftDiv.className = rightDiv.className = 'vertical-container'; // Side-by-side divs using (display: inline-block) and (vertical-align: top).
  leftDiv.style.width = "40%";
  rightDiv.style.width = "60%"; // Right div is wider to accommodate table rows.
  controlsContainer.appendChild(leftDiv);
  controlsContainer.appendChild(rightDiv);

  const fillInvoiceButton = document.createElement('button');
  fillInvoiceButton.className = 'btn';
  fillInvoiceButton.textContent = 'Fill Template';
  fillInvoiceButton.onclick = async () => {
    await fillTemplate(); // Generate the invoice by filling the template with data.
  };
  controlsContainer.appendChild(fillInvoiceButton);

  const resetDocumentButton = document.createElement('button');
  resetDocumentButton.className = 'btn';
  resetDocumentButton.textContent = '🗘 Reset Document';
  resetDocumentButton.onclick = async () => {
    await loadTemplateDocument(); // Reset document, data and input fields.
  };
  controlsContainer.appendChild(resetDocumentButton);
  element.insertBefore(controlsContainer, element.firstChild);
  </script>
</body>
</html>

How to Use a PDF Generation SDK for Creating Invoices

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

Resources

Related Articles

View all blogs

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

How to Convert PDF to TIFF

How to Create a JavaScript PDF Editor