Midas PDF

Concept

  • Universal Template Language using CSS / Html and {{placeholders}} and command switches
  • Allows AI generation of Document Templates
  • Allows Filling in any given Form
  • Separate from WordPress Plugin, Filemaker or Adobe API
  • WordPress Plugin Midas PDF Generator to help generate templates with visual aid
  • Templates are stored in MongoDB / Images in S3
  • Middleware Curl from anyhwhere returns downloadable PDF URL

Template Language

Hello {{firstName}}!

The placeholders can be used anywhere in html with double curly brackets {{firstname}}.
To position and style it we surround it with a div class and give this an absolute position on the canvas in mm! in CSS

The variable name must match the mongo document field name or path inside the “data” tree. Which is also the Midas Forms fieldName

<div class="form-field-2">{{tax_number}}</div>
----------------------------------------------
.form-field-2 {
    position: absolute;
    top: 31mm;
    left: 25mm;
    width: 120mm;
    font-size: 11px;
    font-family: Arial;
    line-height: 1.4;
}

Switches

Extending the variable name in the curly brackets with elements to instruct the middlewares rendering

Array

Assume the variable {{colors}} is not red but [“red”, “blue”, “pink”]…

The middlewares default behaviour is to render an array as a list, converting it to

  • red
  • blue
  • pink

But we can control this by {{colors|comma}} which will result in

red, blue, pink

{{colors|list}} will provide a list without bullet points

Conditionals

We can show or hide elements on the PDF based on the value of a field

  • Field has value (not empty) 
  • Field is less than (numbers)
  • Field equals specific value 
  • Field is greater than (numbers) 
<div class="conditional-1756290823649-1">{{#if fullname}}Hello thank you for the value{{/if}}</div>

Images

Images in the template can either be background images or placed images.. such as logos. They should be complete accessible URLs

Image Placement

Static images on the template like company logos etc… The image URL is fixed in the template!

<img src="https://joswpbucket01.s3.eu-north-1.amazonaws.com/public/9b60617b-ed69-497f-a150-9a8cdcd828c8.jpg" class="image-2" alt="Image" />


-----------------------------------
.image-2 {
    position: absolute;
    top: 90mm;
    left: 10mm;
    width: 52.6mm;
    height: 39.5mm;
}
Image Urls from document data

This is how to use flexible image insertion with the urls coming from the document data.
Example inserting a QR Code on an invoice

<h1>Image Test Page</h1>
<p>Testing different image types and positions</p>
<img src="{{logo_url}}" class="bild logo" alt="Company Logo" />
<img src="{{signature_url}}" class="bild signature" alt="Signature" />
<img src="{{photo_url}}" class="bild photo" alt="Photo" />

.bild { 
  position: absolute; 
  display: block; 
  border: 1px solid #ccc; 
}
.logo { 
  top: 50mm; 
  left: 30mm; 
  width: 150px; 
  height: 80px; 
}
.signature { 
  bottom: 50mm; 
  right: 40mm; 
  width: 120px; 
  height: 60px; 
}
.photo { 
  top: 150mm; 
  left: 80mm; 
  width: 100px; 
  height: 100px; 
}
Background Image Full Page A4

The background images should have the correct proportions to be strechted to an A4 Canvas

It only appears in the CSS

background-image: url("https://joswpbucket01.s3.eu-north-1.amazonaws.com/public/78f3628b-c190-464e-991d-205785383d89.png"); 
background-size: 210mm 297mm; 
background-position: 0 0; 
background-repeat: no-repeat;

Midas PDF Template Generator

The template language allows us to train and use AI in the generation of PDF documents. But there is also a separate extensinon Plugin to the Midas Form Generator

The purpose is to allow non tech persons to generate any kind of document with ease. The document will be generated and save to MongoDB, while the process of uploading images and replacing them with URLs is handled at the same time

Features

  • Create and Load / Edit existing template from MongoDB
  • Load Form Data as picklist
  • Upload Backgrounds
  • Upload Images
  • Drag and Drop, resize and move elements on canvas
  • Allign, Distribute, Grid Snap Elements on Canvas
  • Set Conditional Fields
  • Set FieldType Parameters
  • Preview PDF

Boiler Plate Concept

Once an agreeable Template has been assembled to our liking we can save it as a boiler plate

As an example assume we have an existing A4 letter to clients with all elements in the right place. Save it as Boiler Plate allows us to reuse all the positioning and only replace variables or any element of our choosing… (logos, background.. etc)

Middleware PDF Generator

While the WordPress Template Generator makes use of the existing Endpoints for image uploads, the PDF generator supplies extra endpoints

  • POST /api/pdf/templates #Create Templates
  • GET /api/pdf/templates?serverKey=XYZ #List Templates
  • DELETE /api/pdf/templates/:templateId?serverKey=XYZ #Delete Template
  • POST /api/pdf/generate #Generate PDF

Example with Data
POST /api/pdf/generate
{
  "template_id": "tpl_1234567890",
  "form_data": {
    "customer_name": "John Doe",
    "logo_url": "https://s3.amazonaws.com/logo.png"
  },
  "serverKey": "XYZ"
}
Example with Load Data instructions

This allows us to use Aggregation Pipelines and Views.. ie to create invoices or policy document from any nested database document modell… We do not rely on simple form data but can calculate what we want printed.. Extract Tranform Load. (layout = “collection OR view”)

{
  "template_id": "tpl_1234567890",
  "record_id": "68ac27289874c72c0386d224",
  "layout": "forms",
  "data_serverKey": "XYZ"
}
Calibration Mode

In normal mode empty variables are not shown, this may make it harder to debug a PDF. Calibration mode prints all empty variables with a placehoder

# For template development - shows all variables
{
  "template_id": "tpl_1234567890",
  "form_data": {...},
  "calibration_mode": true
}
Conditional Display

Allows to set conditions or alternative facts.

<!-- Field has value -->
{{#if is_vip}}VIP Customer{{/if}}

<!-- Value comparison -->
{{#if status="active"}}Active User{{/if}}
Lists and Arrays
"colors": ["red", "blue", "green"]
-----------------------------------

<!-- Basic variables -->
<h1>{{customer_name}}</h1>
<p>{{address}}</p>

<!-- Arrays with formatting -->
<p>Colors: {{colors}}</p>           <!-- Default: bullet list -->
<p>Colors: {{colors|comma}}</p>     <!-- Comma-separated -->
<p>Colors: {{colors|list}}</p>      <!-- HTML list -->
The reply
{"success":true,"template_id":"tpl_1756114841243","template_name":"Clean Image Test","pdf_url":"https://jos
wpbucket01.s3.amazonaws.com/pdf-output/Clean_Image_Test_2025-08-25T09-40-53.pdf","filename":"Clean_Image_Te
st_2025-08-25T09-40-53.pdf","size":8264}%

To be continued…

  • Multi Page Documents
  • Tables.. create from Arrays
  • Checkboxes and Radios
  • Handle relative Positions and overflow (Like Word)
  • AI generation of templates
  • Email PDFs
  • Sign PDFs

Nach oben scrollen