Moderator: Moderatoren
Code: Alles auswählen
async function loadReportConfig() {
const res = await fetch("rechnung.json");
report = await res.json();
// 📄 Etikettendaten vorbereiten
reportData = {
rechnungsnummer: "RE-2024-0012",
datum: "2024-06-03", // 🔁 neu
kunde: {
name: "Max Mustermann",
strasse: "Teststraße 12", // 🔁 neu
plz: "9999", // 🔁 neu
ort: "Musterstadt" // 🔁 neu
},
artikelListe: [
{ artikel: "Apfel", preis: "1.50" },
{ artikel: "Brot", preis: "2.00" },
{ artikel: "Käse", preis: "3.75" },
{ artikel: "Wurst", preis: "4.10" },
{ artikel: "Milch", preis: "1.20" },
{ artikel: "Kaffee", preis: "5.00" },
{ artikel: "Zucker", preis: "1.10" },
{ artikel: "Butter", preis: "2.80" },
{ artikel: "Eier", preis: "2.30" },
{ artikel: "Müsli", preis: "3.90" }
],
summe_netto: "27.65", // optional, für MwSt-Anzeige
summe_mwst: "5.53", // optional
summe_brutto: "33.18" // optional
};
Code: Alles auswählen
{
"paper": {
"top1": 20,
"top2": 45,
"pageHeight": 297
},
"areas": [
{
"id": "area7458",
"title": "Logo",
"top": 0,
"height": 50,
"printCondition": "always",
"topDependsOnPrevious": false,
"disallowChildren": false,
"items": [
{
"type": "text",
"x": 100,
"y": 5,
"value": "MyLogo",
"fontSize": 60,
"bold": false,
"color": "#d9913f",
"align": "left"
}
]
},
{
"id": "kopf",
"title": "Rechnungskopf",
"top": 70,
"height": 40,
"topDependsOnPrevious": true,
"items": [
{
"type": "text",
"x": 0,
"y": 2,
"value": "Rechnungsnummer: {rechnungsnummer}",
"fontSize": 10,
"bold": true
},
{
"type": "text",
"x": 0,
"y": 8,
"value": "Datum: {datum}",
"fontSize": 10
},
{
"type": "text",
"x": 0,
"y": 16,
"value": "An: {kunde.name}",
"fontSize": 10
},
{
"type": "text",
"x": 0,
"y": 22,
"value": "{kunde.strasse}",
"fontSize": 10
},
{
"type": "text",
"x": 0,
"y": 28,
"value": "{kunde.plz} {kunde.ort}",
"fontSize": 10
}
],
"printCondition": "",
"disallowChildren": false
},
{
"id": "wasser",
"title": "Wasserzeichen",
"top": 150,
"height": 100,
"disallowChildren": true,
"items": [
{
"type": "text",
"x": 100,
"y": 20,
"value": "KOPIE",
"fontSize": 70,
"bold": true,
"color": "#50ce58",
"align": "left",
"fontFamily": "Courier"
}
],
"printCondition": "",
"topDependsOnPrevious": false,
"repeatFor": "artikelListe",
"columns": 1
},
{
"id": "einleitung",
"title": "Überschrift / Einleitung",
"height": 15,
"printCondition": "always",
"topDependsOnPrevious": true,
"items": [
{
"type": "text",
"x": 0,
"y": 2,
"value": "Vielen Dank für Ihre Bestellung",
"fontSize": 11,
"bold": true
}
],
"top": 0
},
{
"id": "artikelblock",
"title": "Artikelblock",
"repeatFor": "artikelListe",
"columns": 1,
"labelWidth": 160,
"height": 8,
"topDependsOnPrevious": true,
"items": [
{
"type": "text",
"x": 0,
"y": 2,
"value": "{artikel}",
"fontSize": 10,
"bold": true
},
{
"type": "text",
"x": 90,
"y": 2,
"value": "{preis} €",
"fontSize": 10
}
],
"top": 225,
"printCondition": "",
"disallowChildren": false
},
{
"id": "summe",
"title": "Summenbereich",
"top": 200,
"height": 20,
"topDependsOnPrevious": false,
"items": [
{
"type": "text",
"x": 0,
"y": 2,
"value": "Netto: {summe_netto} €",
"fontSize": 10
},
{
"type": "text",
"x": 60,
"y": 2,
"value": "MwSt (20 %): {summe_mwst} €",
"fontSize": 10
},
{
"type": "text",
"x": 120,
"y": 2,
"value": "Brutto: {summe_brutto} €",
"fontSize": 10,
"bold": true
}
]
},
{
"id": "endtext",
"title": "Rechnungs-Endtext",
"top": 325,
"height": 45,
"topDependsOnPrevious": true,
"items": [
{
"type": "text",
"x": 0,
"y": 2,
"value": "Vielen Dank für Ihren Einkauf!\n\nBitte überweisen Sie den Gesamtbetrag innerhalb von 14 Tagen auf folgendes Konto:\nEmpfänger: Hotel Bergland\nIBAN: ATxx xxxx xxxx xxxx xxxx\nBIC: XXXXXXXX\nVerwendungszweck: Rechnungsnummer {rechnungsnummer}\n\nBei Fragen stehen wir Ihnen gerne zur Verfügung.\nMit freundlichen Grüßen\nIhr Team vom Hotel Bergland",
"fontSize": 9
}
]
}
]
}
Code: Alles auswählen
{
{
"id": "logoarea",
"title": "Logo",
"top": 0,
"height": 50,
"printCondition": "always",
"topDependsOnPrevious": false,
"disallowChildren": false,
"items": [
{
"type": "image",
"src": "image/logo.png",
"x": 100,
"y": 5,
"width": 80,
"height": 40
},
{
"type": "image",
"src": "image/logo.png",
"x": 20,
"y": 5,
"width": 40,
"height": 20,
"rotate": 90
},{
"type": "image",
"src": "image/logo.png",
"x": 60,
"y": 5,
"width": 40,
"height": 20,
"rotate": 45
},
{
"type": "text",
"x": 100,
"y": 5,
"value": "WINHOTEL",
"fontSize": 10,
"bold": false,
"color": "#d9913f",
"align": "left"
}
]
}
Code: Alles auswählen
else if (item.type === "image") {
const img = document.createElement("img");
img.src = item.src;
img.style.position = "absolute";
img.style.left = (item.x ?? 0) + "mm";
img.style.top = (item.y ?? 0) + "mm";
img.style.width = (item.width ?? 30) + "mm";
img.style.height = (item.height ?? 20) + "mm";
img.style.objectFit = "contain";
if (item.rotate) {
img.style.transform = `rotate(${item.rotate}deg)`;
img.style.transformOrigin = "left top";
}
box.appendChild(img);
}
Hallo Ottoazzo hat geschrieben: ↑Do, 05. Jun 2025 10:56 Trotz mancher Kritik denke ich, dass ich auf einem guten Weg bin – Schritt für Schritt entsteht ein flexibler, HTML-basierter Reportdesigner, der sich klar an realen Anforderungen orientiert.
Ich sehe es als Ergänzung zu bestehenden Lösungen – keine Konkurrenz, aber ein Werkzeug, auf das man zurückgreifen kann, wenn man’s mal braucht.
