Dynamische generator van medische documenten
Context
Binnen een medisch platform kon elke patiëntenresource worden omgezet in een printbaar document (zoals een analyserapport, medisch verslag of evaluatie).
Deze documenten moesten:
- 🖌️ Een strikt design volgen zoals gedefinieerd in Figma
- 📐 Verschillende formaten ondersteunen (A4, A3, enz.)
- 📏 Correct blijven bij variabele inhoudslengte
De Next.js-applicatie die ik ontwikkelde maakte deel uit van een bredere generatieketen, met een specifieke rol:
- Een request ontvangen met de parameters van het document
- De bijbehorende data ophalen
- Een webpagina genereren, die vervolgens door Puppeteer wordt vastgelegd om de uiteindelijke PDF te produceren
De technische uitdaging
Een Figma-design pixel-perfect reproduceren in een vast formaat is vrij standaard.
De complexiteit ontstaat bij dynamische content. Op papier kan een pagina zich niet automatisch aanpassen:
Alleen op intuïtie vertrouwen is hier niet genoeg. Dit is een echte engineeringuitdaging, die zowel creativiteit als een methodische aanpak vereist.
Mijn oplossing: eerst meten, dan renderen
Het systeem gebruikt twee parallelle renders:
De ghost render
De content wordt buiten het scherm gegenereerd. Deze dient als referentie en geeft de exacte afmetingen van de inhoud vóór de layout:
De final render
Zodra de hoogtes bekend zijn, wordt de content verdeeld over één of meerdere pagina’s. Als een pagina vol is, wordt de resterende content automatisch naar de volgende pagina verplaatst. Dit proces herhaalt zich totdat alles correct is geplaatst. ✅
Sterke punten en beperkingen
✅ Sterke punten
- 📄 Compatibel met elk documentformaat (A3, A4, custom, ...).
- 🖋️ Optionele header en footer.
- ⚡ Optionele dynamische pagina’s: je kunt statisch blijven als de content niet verandert.
- 🔢 Ondersteuning voor automatische paginanummering, ook voor dynamisch toegevoegde pagina’s.
⚠️ Beperkingen
- 🧩 Splitsbare elementen moeten directe children van de container zijn.
- 📏 Voor spacing moet verplicht padding worden gebruikt, geen margins.
- Duidelijke documentatie
- Codeconventies, ingebouwd via gespecialiseerde componenten die zonder nadenken gebruikt kunnen worden, zodat het systeem betrouwbaar blijft, zelfs wanneer andere developers content toevoegen
Teamtool: realtime preview
Om ontwikkeling en testen te vergemakkelijken, heb ik een interne interface gebouwd waarmee je:
- ✏️ Patiëntdata in realtime kunt aanpassen
- 👀 De impact onmiddellijk kunt visualiseren in het eindresultaat
Conclusie
In frontend streven we er meestal naar om interfaces steeds adaptiever te maken.
Hier was het omgekeerde: dynamische content in een vaste layout passen.
Dit project heeft me geleerd om:
- 🔄 Mijn aanpak aan te passen aan het probleem in plaats van reflexmatig te werken
- 🔗 Te begrijpen hoe een onderdeel past binnen een grotere infrastructuurketen
- 🧩 Systemen te ontwerpen die anderen kunnen gebruiken zonder ze te hoeven begrijpen