Ein Blick hinter den Klick
Von Bankdaten zu
„Ah, so sieht’s aus.“
Wie aus einer CAMT.053-Datei ein lesbares PDF wird.
Eine kleine Reise vom ersten Klick bis zum Download.
Eine Datei auf ihrer Reise
Folge dem Weg von XML zu PDF.
- Kontoauszug.xmlDateien öffnen
01 · Dein Klick
Datei öffnen
Du wählst den Kontoauszug aus. Der Browser liest die Datei in seinen Arbeitsspeicher – ohne Upload zum Server.
<Ntry> <Amt>980.00</Amt> <CdtDbtInd> CRDT </CdtDbtInd> </Ntry>02 · JavaScript liest
XML lesen
Der Parser erkennt CAMT.053 und liest Konto, Salden und Buchungen aus der XML-Struktur.
- 06.10.2026 · GebuchtHafen & FormRechnung 2026-103+980,00 €
03 · Daten werden lesbar
Buchung verstehen
CRDT wird zur Gutschrift. Aus XML-Feldern werden Datum, Name, Verwendungszweck und ein formatierter Betrag.
- KONTUR · BEISPIELKontoauszugHafen & Form +980,00 €Endsaldo 13.430,00 €Vereinfachte Darstellung
04 · Dein PDF-Export
PDF aufbauen
Beim Export setzt pdfmake die ausgewählten Daten in ein Layout: mit Salden, Tabelle und Quellenhinweisen.
- Kontoauszug.pdfAuf deinem Gerät
05 · Fertig für dich
Herunterladen
Eine temporäre Blob-URL übergibt das fertige PDF an den Browser. Er speichert es auf deinem Gerät.
Die Animation erklärt den Ablauf. Mit diesem Button erzeugst du das Beispiel-PDF tatsächlich – lokal mit derselben Konvertierung.
Was JavaScript unterwegs macht
01Datei öffnen
const { xml, hash } =
await readCamtFile(file);arrayBuffer() liest die Bytes. TextDecoder decodiert sie mit der erkannten Zeichenkodierung. SHA-256 bildet einen Fingerabdruck der Quelle.
02XML lesen
const statements =
parseCamt(xml, file.name, hash);DOMParser erzeugt einen Dokumentbaum. Kontur prüft Format und benötigte Elemente. Beschädigtes XML wird abgewiesen; dies ist keine vollständige XSD-Prüfung.
03Buchung verstehen
// Ausschnitt des Buchungsobjekts
{ amount: "980.00",
direction: "CRDT",
party: "Hafen & Form" }JavaScript-Objekte liegen im React-State. Dezimalarithmetik erhält exakte Beträge. Bei passenden Salden wird Anfangssaldo + Buchungen = Endsaldo geprüft; Abweichungen werden gemeldet.
04PDF aufbauen
const blob = await buildPdf({
statement, entries,
filtered: false
});pdfDefinition() beschreibt das Layout. pdfmake setzt Text, Tabellen und Seitenumbrüche. getBlob() liefert die PDF-Datei im Speicher. Aktive Filter werden im echten Export gekennzeichnet.
05Herunterladen
downloadBlob(
blob, "Kontoauszug.pdf"
);Ein temporärer Link erhält Blob-URL und Dateinamen. JavaScript löst den Download aus und gibt die URL danach frei. Die XML-Datei bleibt unverändert; importierte Daten werden beim Verlassen oder Neuladen verworfen.
Code-Ausschnitte zur Erklärung, gekürzt.
„Upload“ klingt nach Server.
Hier bleibt’s lokal.
Die Website liefert den JavaScript-Code und die benötigten Bibliotheken. Dein Browser führt sie aus: Er liest die ausgewählte Datei, bereitet die Buchungen auf und erstellt das PDF. Für die Umwandlung werden keine Bankdaten an einen Server übertragen.
Das PDF ist eine lesbare Darstellung deiner XML-Daten. Die ursprüngliche CAMT-Datei wird dabei nicht verändert. Im Konverter kannst du zusätzlich das PDF-Layout wählen oder Buchungen vor dem Export filtern.
Jetzt mit deinem Kontoauszug.
Datei öffnen, Buchungen prüfen und dein PDF herunterladen.