Create an HTML template for invoices

This article explains a rather complex project that shows how a HTML template for invoicing can be created in InDesign, exported into a pdfChip template using the export filter and then turned into invoices.

Attached is an InDesign file as an example for an invoice. You should download unpack and open the file in order to follow the steps of this article.

This project is much more advanced than the other ones in which the InDesign Export is explained. The reason is that invoices have rather difficult requirements:

  • repeating fields for each of the line items on the invoice
  • varying number of pages, depending on the number of line items
  • first, last and middle pages may have different layouts
  • at the end of each page a subtotals block and at the end of the invoice a totals block is required
  • page breaks need to be determined based on the height of all of the line items on the respective page minus the height of the subtotals block

So, if you are not yet familiar with how the InDesign Export works you should first read the other articles in this chapter.

As always when it is about creating various instances from a template we need a data source that has the variable data. In this example we are using XML files in the ZUGFeRD format. (ZUGFeRD is a German standard for electronic invoices and a ZUGFeRD invoice consists of a PDF/A-3 container into which an XML invoice is embedded.) This example reads data from such ZUGFeRD invoices, puts it into the corresponding objects in the template and creates a single PDF file for each invoice. Finally the XML is embedded into the PDF and the file is saved according to the PDF/A-3 standard. So a full ZUGFeRD invoice is created.

The InDesign file

The InDesign file uses layers and groups to mark content that belongs to each other like the different kinds of data in a line. Script Labels are used to mark objects so that a JavaScript can then later pick up that information to modify the respective content. The file has three pages: First and last for the corresponding pages of the PDF invoice and a middle page that is the template for all other pages.

pinqi_invoice_template.zip

HTML template created via the export2pdfChip.jsx plug-in

All content from the Resources folder is copied into the template and the index.html has references to all JavaScripts in the js folder.

The invoices folder contains sample XML files for ZUGFeRD invoices: A few examples from the ZUGFeRD standard specification and a very long example with callas products on it.

If you want to modify any of the XML files or add new ones you will have to also add them to the config.js file.

The invoice PDF files are as usual created by processing the index.html with pdfChip

Each PDF has it's XML file embedded.

The invoice "invoice.callas.pdf" consists of 13 pages and the first and last pages are different from each other and from all middle pages as required in above "specification".