npm - nexabase-report - Versions diffs - 0.2.10 → 0.2.12 - Mend

nexabase-report 0.2.10 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/examples/integration/index.html CHANGED Viewed

@@ -1,100 +1,100 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>nexabase-report - Ejemplos de Integración</title>
-    <style>
-        body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 20px; background: #f9fafb; }
-        h1 { color: #1e3a8a; }
-        h2 { color: #374151; margin-top: 32px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
-        .card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
-        .card h3 { margin: 0 0 8px 0; color: #1e40af; }
-        .card p { margin: 0 0 12px 0; color: #64748b; font-size: 14px; }
-        .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
-        .badge-razor { background: #eff6ff; color: #1e40af; }
-        .badge-blazor { background: #f0fdf4; color: #16a34a; }
-        .badge-html { background: #fef3c7; color: #92400e; }
-        .badge-jquery { background: #ede9fe; color: #6d28d9; }
-        code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
-        pre { background: #1f2937; color: #f9fafb; padding: 16px; border-radius: 8px; overflow-x: auto; }
-        pre code { background: none; color: inherit; }
-        .file-link { color: #1e40af; text-decoration: none; font-size: 13px; }
-        .file-link:hover { text-decoration: underline; }
-    </style>
-</head>
-<body>
-    <h1>📊 nexabase-report — Ejemplos de Integración</h1>
-    <p>Ejemplos funcionales de cómo integrar el visor de reportes en diferentes tecnologías.</p>
-    <h2>🟦 Blazor Server / Razor</h2>
-    <div class="card">
-        <h3>Blazor Razor Page</h3>
-        <p>Componente para Blazor Server (.NET 8) con IJSRuntime para interactuar con el custom element.</p>
-        <span class="badge badge-razor">Razor</span>
-        <a class="file-link" href="BlazorRazor.razor">Ver archivo →</a>
-    </div>
-    <div class="card">
-        <h3>Blazor Server Page (code-behind)</h3>
-        <p>Page completa con Injected HttpClient, manejo de parámetros y botones de exportación.</p>
-        <span class="badge badge-blazor">Blazor Server</span>
-        <a class="file-link" href="BlazorServer.razor">Ver archivo →</a>
-    </div>
-    <h2>🟩 ASP.NET Core Razor Pages</h2>
-    <div class="card">
-        <h3>Razor Pages (.cshtml)</h3>
-        <p>Ejemplo clásico de Razor Pages con section Scripts y HTML helpers para serializar datos.</p>
-        <span class="badge badge-razor">Razor Pages</span>
-        <a class="file-link" href="AspNetCoreRazorPages.cshtml">Ver archivo →</a>
-    </div>
-    <h2>🟨 Vanilla HTML + JS</h2>
-    <div class="card">
-        <h3>jQuery + HTML</h3>
-        <p>Ejemplo puro con jQuery que genera datos simulados (como haría un backend .NET) y los pasa al visor.</p>
-        <span class="badge badge-jquery">jQuery</span>
-        <a class="file-link" href="integration-jquery.html">Ver archivo →</a>
-    </div>
-    <h2>📁 Archivos de Definición de Reportes</h2>
-    <div class="card">
-        <h3>invoice-report.json</h3>
-        <p>Reporte de factura de venta listo para cargar. Compatible con todos los ejemplos de arriba.</p>
-        <a class="file-link" href="../blazor-razor-invoice/invoice-report.json">Ver archivo →</a>
-    </div>
-    <h2>🔧 Cómo usar</h2>
-    <pre><code># 1. Build del proyecto
-npm run build
-# 2. Copiar dist/ a tu proyecto ASP.NET
-# o usar un CDN (jsDelivr, unpkg)
-# 3. En tu .cshtml o .razor:
-&lt;link rel="stylesheet" href="~/lib/nexabase-report/style.css" />
-&lt;script src="~/lib/nexabase-report/nexabase-report.umd.js">&lt;/script>
-# 4. Registrar y usar
-NexaReport.registerNexaReport();
-const viewer = document.getElementById('viewer');
-viewer.definition = definitionJson;
-viewer.data = dataArray;</code></pre>
-    <h2>⚡ Tips para .NET</h2>
-    <ul>
-        <li>Usa <code>JsonSerializer.Serialize()</code> para convertir tus modelos a JSON</li>
-        <li>Pasa los datos como <code>List&lt;Dictionary&lt;string, object&gt;&gt;</code> o tu modelo directamente</li>
-        <li>Para datos de múltiples fuentes, usa el formato <code>{ "alias": [...] }</code></li>
-        <li>El viewer funciona tanto en Blazor Server (con IJSRuntime) como en Blazor WebAssembly</li>
-    </ul>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>nexabase-report - Ejemplos de Integración</title>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 20px; background: #f9fafb; }
+        h1 { color: #1e3a8a; }
+        h2 { color: #374151; margin-top: 32px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
+        .card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
+        .card h3 { margin: 0 0 8px 0; color: #1e40af; }
+        .card p { margin: 0 0 12px 0; color: #64748b; font-size: 14px; }
+        .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
+        .badge-razor { background: #eff6ff; color: #1e40af; }
+        .badge-blazor { background: #f0fdf4; color: #16a34a; }
+        .badge-html { background: #fef3c7; color: #92400e; }
+        .badge-jquery { background: #ede9fe; color: #6d28d9; }
+        code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
+        pre { background: #1f2937; color: #f9fafb; padding: 16px; border-radius: 8px; overflow-x: auto; }
+        pre code { background: none; color: inherit; }
+        .file-link { color: #1e40af; text-decoration: none; font-size: 13px; }
+        .file-link:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <h1>📊 nexabase-report — Ejemplos de Integración</h1>
+    <p>Ejemplos funcionales de cómo integrar el visor de reportes en diferentes tecnologías.</p>
+    <h2>🟦 Blazor Server / Razor</h2>
+    <div class="card">
+        <h3>Blazor Razor Page</h3>
+        <p>Componente para Blazor Server (.NET 8) con IJSRuntime para interactuar con el custom element.</p>
+        <span class="badge badge-razor">Razor</span>
+        <a class="file-link" href="BlazorRazor.razor">Ver archivo →</a>
+    </div>
+    <div class="card">
+        <h3>Blazor Server Page (code-behind)</h3>
+        <p>Page completa con Injected HttpClient, manejo de parámetros y botones de exportación.</p>
+        <span class="badge badge-blazor">Blazor Server</span>
+        <a class="file-link" href="BlazorServer.razor">Ver archivo →</a>
+    </div>
+    <h2>🟩 ASP.NET Core Razor Pages</h2>
+    <div class="card">
+        <h3>Razor Pages (.cshtml)</h3>
+        <p>Ejemplo clásico de Razor Pages con section Scripts y HTML helpers para serializar datos.</p>
+        <span class="badge badge-razor">Razor Pages</span>
+        <a class="file-link" href="AspNetCoreRazorPages.cshtml">Ver archivo →</a>
+    </div>
+    <h2>🟨 Vanilla HTML + JS</h2>
+    <div class="card">
+        <h3>jQuery + HTML</h3>
+        <p>Ejemplo puro con jQuery que genera datos simulados (como haría un backend .NET) y los pasa al visor.</p>
+        <span class="badge badge-jquery">jQuery</span>
+        <a class="file-link" href="integration-jquery.html">Ver archivo →</a>
+    </div>
+    <h2>📁 Archivos de Definición de Reportes</h2>
+    <div class="card">
+        <h3>invoice-report.json</h3>
+        <p>Reporte de factura de venta listo para cargar. Compatible con todos los ejemplos de arriba.</p>
+        <a class="file-link" href="../blazor-razor-invoice/invoice-report.json">Ver archivo →</a>
+    </div>
+    <h2>🔧 Cómo usar</h2>
+    <pre><code># 1. Build del proyecto
+npm run build
+# 2. Copiar dist/ a tu proyecto ASP.NET
+# o usar un CDN (jsDelivr, unpkg)
+# 3. En tu .cshtml o .razor:
+&lt;link rel="stylesheet" href="~/lib/nexabase-report/style.css" />
+&lt;script src="~/lib/nexabase-report/nexabase-report.umd.js">&lt;/script>
+# 4. Registrar y usar
+NexaReport.registerNexaReport();
+const viewer = document.getElementById('viewer');
+viewer.definition = definitionJson;
+viewer.data = dataArray;</code></pre>
+    <h2>⚡ Tips para .NET</h2>
+    <ul>
+        <li>Usa <code>JsonSerializer.Serialize()</code> para convertir tus modelos a JSON</li>
+        <li>Pasa los datos como <code>List&lt;Dictionary&lt;string, object&gt;&gt;</code> o tu modelo directamente</li>
+        <li>Para datos de múltiples fuentes, usa el formato <code>{ "alias": [...] }</code></li>
+        <li>El viewer funciona tanto en Blazor Server (con IJSRuntime) como en Blazor WebAssembly</li>
+    </ul>
+</body>
+</html>

package/examples/integration/integration-jquery.html CHANGED Viewed

@@ -1,142 +1,142 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Reporte - Ejemplo jQuery + nexabase-report</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.9/dist/style.css">
-    <style>
-        body { font-family: system-ui, sans-serif; margin: 20px; background: #f9fafb; }
-        .report-container { height: 800px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: white; }
-        .toolbar { margin-bottom: 12px; display: flex; gap: 8px; }
-        .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
-        .btn-primary { background: #1e40af; color: white; }
-        .btn-success { background: #16a34a; color: white; }
-        .btn-outline { background: white; border: 1px solid #d1d5db; }
-        .info { margin-top: 12px; padding: 12px; background: #eff6ff; border-radius: 6px; font-size: 13px; }
-    </style>
-</head>
-<body>
-    <h2>Reporte de Factura</h2>
-    <div class="toolbar">
-        <button class="btn btn-primary" id="btnPdf">Exportar PDF</button>
-        <button class="btn btn-success" id="btnExcel">Exportar Excel</button>
-        <button class="btn btn-outline" id="btnCsv">Exportar CSV</button>
-        <button class="btn btn-outline" id="btnReload">Recargar</button>
-    </div>
-    <nexa-viewer id="reportViewer"></nexa-viewer>
-    <div class="info">
-        <strong>Datos simulados generados por jQuery/JavaScript:</strong><br>
-        Los datos de factura e items son construidos dinámicamente en el cliente.
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.9/dist/nexabase-report.umd.js"></script>
-    <script>
-    $(function() {
-        // Registrar el custom element una vez
-        NexaReport.registerNexaReport();
-        // Datos simulados (como vendrían de un API en .NET)
-        var facturaData = {
-            numeroFactura: "FV-2026-00456",
-            fecha: "2026-05-09",
-            nombreCliente: "CLIENTE EJEMPLO S.A.S.",
-            nitCliente: "900.987.654-3",
-            direccionCliente: "Carrera 15 # 88-40, Bogotá D.C.",
-            formaPago: "Crédito 30 días",
-            vendedor: "Carlos Mendoza"
-        };
-        var itemsData = [
-            { codigo: "P-001", descripcion: "Portátil HP ProBook 450 G10", cantidad: 2, precioUnitario: 3250000, descuentoPorcentaje: 5, subtotal: 6175000 },
-            { codigo: "P-002", descripcion: "Monitor Dell 27'' UltraSharp", cantidad: 2, precioUnitario: 1450000, descuentoPorcentaje: 0, subtotal: 2900000 },
-            { codigo: "P-003", descripcion: "Teclado mecánico Logitech MX", cantidad: 5, precioUnitario: 285000, descuentoPorcentaje: 10, subtotal: 1282500 },
-            { codigo: "P-004", descripcion: "Mouse wireless Logitech MX Master 3", cantidad: 5, precioUnitario: 380000, descuentoPorcentaje: 10, subtotal: 1710000 },
-            { codigo: "P-005", descripcion: "Webcam Logitech Brio 4K", cantidad: 3, precioUnitario: 650000, descuentoPorcentaje: 0, subtotal: 1950000 },
-            { codigo: "P-006", descripcion: "Docking station Dell WD19TBS", cantidad: 2, precioUnitario: 890000, descuentoPorcentaje: 5, subtotal: 1691000 }
-        ];
-        var definition = {
-            metadata: {
-                name: "Factura de Venta",
-                author: "Sistema .NET",
-                createdAt: new Date().toISOString()
-            },
-            layout: {
-                page: { format: "A4", orientation: "portrait", margins: { top: 1.5, right: 1, bottom: 1, left: 1 } },
-                bands: [
-                    {
-                        id: "rh_factura", type: "ReportHeader", height: 250,
-                        elements: [
-                            { id: "t_titulo", type: "Text", x: 20, y: 10, width: 300, height: 24, content: "MI EMPRESA S.A.", style: { fontSize: "20px", fontWeight: "bold", color: "#1e3a8a" } },
-                            { id: "t_num", type: "Text", x: 450, y: 10, width: 210, height: 24, content: "FACTURA N° {{numeroFactura}}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e40af", textAlign: "right" } },
-                            { id: "t_cliente", type: "Text", x: 20, y: 112, width: 280, height: 16, content: "{{nombreCliente}}", style: { fontSize: "12px", color: "#1e293b" } },
-                            { id: "t_nit", type: "Text", x: 20, y: 130, width: 200, height: 14, content: "NIT: {{nitCliente}}", style: { fontSize: "11px", color: "#64748b" } },
-                            { id: "t_direccion", type: "Text", x: 20, y: 146, width: 350, height: 14, content: "{{direccionCliente}}", style: { fontSize: "11px", color: "#64748b" } },
-                            { id: "t_fecha", type: "Text", x: 450, y: 58, width: 210, height: 14, content: "Fecha: {{fecha}}", style: { fontSize: "11px", color: "#64748b", textAlign: "right" } },
-                            { id: "t_vendedor", type: "Text", x: 480, y: 130, width: 180, height: 14, content: "Vendedor: {{vendedor}}", style: { fontSize: "11px", color: "#475569", textAlign: "right" } }
-                        ]
-                    },
-                    {
-                        id: "db_items", type: "DataBand", height: 280, dataSource: "items",
-                        elements: [
-                            {
-                                id: "table_items", type: "Table", x: 0, y: 30, width: 680, height: 240,
-                                tableColumns: [
-                                    { id: "c1", title: "Código", width: 80, binding: "codigo" },
-                                    { id: "c2", title: "Producto", width: 260, binding: "descripcion" },
-                                    { id: "c3", title: "Cant.", width: 70, binding: "cantidad" },
-                                    { id: "c4", title: "Precio Unit.", width: 110, binding: "precioUnitario" },
-                                    { id: "c5", title: "Desc.", width: 60, binding: "descuentoPorcentaje" },
-                                    { id: "c6", title: "Subtotal", width: 100, binding: "subtotal" }
-                                ],
-                                tableShowFooter: true,
-                                style: { fontSize: "11px" }
-                            }
-                        ]
-                    },
-                    {
-                        id: "rf_totales", type: "ReportFooter", height: 120,
-                        elements: [
-                            { id: "t_subtotal_label", type: "Text", x: 400, y: 8, width: 120, height: 18, content: "Subtotal:", style: { fontSize: "12px", fontWeight: "bold", textAlign: "right" } },
-                            { id: "t_subtotal_val", type: "Text", x: 530, y: 8, width: 150, height: 18, content: "${[sum(subtotal)]}", style: { fontSize: "12px", textAlign: "right" } },
-                            { id: "t_total_label", type: "Text", x: 400, y: 76, width: 120, height: 28, content: "TOTAL:", style: { fontSize: "16px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } },
-                            { id: "t_total_val", type: "Text", x: 530, y: 76, width: 150, height: 28, content: "${[sum(subtotal) * 1.19]}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } }
-                        ]
-                    },
-                    {
-                        id: "pf_pagina", type: "PageFooter", height: 30,
-                        elements: [
-                            { id: "t_pagina", type: "Text", x: 0, y: 8, width: 680, height: 16, content: "Página {{Page}} de {{TotalPages}}", style: { fontSize: "9px", color: "#94a3b8", textAlign: "center" } }
-                        ]
-                    }
-                ],
-                watermark: { text: "", opacity: 0 }
-            },
-            dataSources: [
-                { id: "ds_factura", alias: "factura", enabled: true, isManual: true, manualData: [facturaData] },
-                { id: "ds_items", alias: "items", enabled: true, isManual: true, manualData: itemsData }
-            ],
-            documentType: "Report"
-        };
-        // Asignar al viewer
-        var viewer = document.getElementById('reportViewer');
-        viewer.definition = definition;
-        viewer.data = { factura: [facturaData], items: itemsData };
-        // Botones
-        $('#btnPdf').click(function() { viewer.exportPdf(); });
-        $('#btnExcel').click(function() { viewer.exportExcel(); });
-        $('#btnCsv').click(function() { viewer.exportCsv(); });
-        $('#btnReload').click(function() {
-            viewer.definition = null;
-            setTimeout(function() { viewer.definition = definition; }, 50);
-        });
-    });
-    </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reporte - Ejemplo jQuery + nexabase-report</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.10/dist/style.css">
+    <style>
+        body { font-family: system-ui, sans-serif; margin: 20px; background: #f9fafb; }
+        .report-container { height: 800px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: white; }
+        .toolbar { margin-bottom: 12px; display: flex; gap: 8px; }
+        .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
+        .btn-primary { background: #1e40af; color: white; }
+        .btn-success { background: #16a34a; color: white; }
+        .btn-outline { background: white; border: 1px solid #d1d5db; }
+        .info { margin-top: 12px; padding: 12px; background: #eff6ff; border-radius: 6px; font-size: 13px; }
+    </style>
+</head>
+<body>
+    <h2>Reporte de Factura</h2>
+    <div class="toolbar">
+        <button class="btn btn-primary" id="btnPdf">Exportar PDF</button>
+        <button class="btn btn-success" id="btnExcel">Exportar Excel</button>
+        <button class="btn btn-outline" id="btnCsv">Exportar CSV</button>
+        <button class="btn btn-outline" id="btnReload">Recargar</button>
+    </div>
+    <nexa-viewer id="reportViewer"></nexa-viewer>
+    <div class="info">
+        <strong>Datos simulados generados por jQuery/JavaScript:</strong><br>
+        Los datos de factura e items son construidos dinámicamente en el cliente.
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.10/dist/nexabase-report.umd.js"></script>
+    <script>
+    $(function() {
+        // Registrar el custom element una vez
+        NexaReport.registerNexaReport();
+        // Datos simulados (como vendrían de un API en .NET)
+        var facturaData = {
+            numeroFactura: "FV-2026-00456",
+            fecha: "2026-05-09",
+            nombreCliente: "CLIENTE EJEMPLO S.A.S.",
+            nitCliente: "900.987.654-3",
+            direccionCliente: "Carrera 15 # 88-40, Bogotá D.C.",
+            formaPago: "Crédito 30 días",
+            vendedor: "Carlos Mendoza"
+        };
+        var itemsData = [
+            { codigo: "P-001", descripcion: "Portátil HP ProBook 450 G10", cantidad: 2, precioUnitario: 3250000, descuentoPorcentaje: 5, subtotal: 6175000 },
+            { codigo: "P-002", descripcion: "Monitor Dell 27'' UltraSharp", cantidad: 2, precioUnitario: 1450000, descuentoPorcentaje: 0, subtotal: 2900000 },
+            { codigo: "P-003", descripcion: "Teclado mecánico Logitech MX", cantidad: 5, precioUnitario: 285000, descuentoPorcentaje: 10, subtotal: 1282500 },
+            { codigo: "P-004", descripcion: "Mouse wireless Logitech MX Master 3", cantidad: 5, precioUnitario: 380000, descuentoPorcentaje: 10, subtotal: 1710000 },
+            { codigo: "P-005", descripcion: "Webcam Logitech Brio 4K", cantidad: 3, precioUnitario: 650000, descuentoPorcentaje: 0, subtotal: 1950000 },
+            { codigo: "P-006", descripcion: "Docking station Dell WD19TBS", cantidad: 2, precioUnitario: 890000, descuentoPorcentaje: 5, subtotal: 1691000 }
+        ];
+        var definition = {
+            metadata: {
+                name: "Factura de Venta",
+                author: "Sistema .NET",
+                createdAt: new Date().toISOString()
+            },
+            layout: {
+                page: { format: "A4", orientation: "portrait", margins: { top: 1.5, right: 1, bottom: 1, left: 1 } },
+                bands: [
+                    {
+                        id: "rh_factura", type: "ReportHeader", height: 250,
+                        elements: [
+                            { id: "t_titulo", type: "Text", x: 20, y: 10, width: 300, height: 24, content: "MI EMPRESA S.A.", style: { fontSize: "20px", fontWeight: "bold", color: "#1e3a8a" } },
+                            { id: "t_num", type: "Text", x: 450, y: 10, width: 210, height: 24, content: "FACTURA N° {{numeroFactura}}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e40af", textAlign: "right" } },
+                            { id: "t_cliente", type: "Text", x: 20, y: 112, width: 280, height: 16, content: "{{nombreCliente}}", style: { fontSize: "12px", color: "#1e293b" } },
+                            { id: "t_nit", type: "Text", x: 20, y: 130, width: 200, height: 14, content: "NIT: {{nitCliente}}", style: { fontSize: "11px", color: "#64748b" } },
+                            { id: "t_direccion", type: "Text", x: 20, y: 146, width: 350, height: 14, content: "{{direccionCliente}}", style: { fontSize: "11px", color: "#64748b" } },
+                            { id: "t_fecha", type: "Text", x: 450, y: 58, width: 210, height: 14, content: "Fecha: {{fecha}}", style: { fontSize: "11px", color: "#64748b", textAlign: "right" } },
+                            { id: "t_vendedor", type: "Text", x: 480, y: 130, width: 180, height: 14, content: "Vendedor: {{vendedor}}", style: { fontSize: "11px", color: "#475569", textAlign: "right" } }
+                        ]
+                    },
+                    {
+                        id: "db_items", type: "DataBand", height: 280, dataSource: "items",
+                        elements: [
+                            {
+                                id: "table_items", type: "Table", x: 0, y: 30, width: 680, height: 240,
+                                tableColumns: [
+                                    { id: "c1", title: "Código", width: 80, binding: "codigo" },
+                                    { id: "c2", title: "Producto", width: 260, binding: "descripcion" },
+                                    { id: "c3", title: "Cant.", width: 70, binding: "cantidad" },
+                                    { id: "c4", title: "Precio Unit.", width: 110, binding: "precioUnitario" },
+                                    { id: "c5", title: "Desc.", width: 60, binding: "descuentoPorcentaje" },
+                                    { id: "c6", title: "Subtotal", width: 100, binding: "subtotal" }
+                                ],
+                                tableShowFooter: true,
+                                style: { fontSize: "11px" }
+                            }
+                        ]
+                    },
+                    {
+                        id: "rf_totales", type: "ReportFooter", height: 120,
+                        elements: [
+                            { id: "t_subtotal_label", type: "Text", x: 400, y: 8, width: 120, height: 18, content: "Subtotal:", style: { fontSize: "12px", fontWeight: "bold", textAlign: "right" } },
+                            { id: "t_subtotal_val", type: "Text", x: 530, y: 8, width: 150, height: 18, content: "${[sum(subtotal)]}", style: { fontSize: "12px", textAlign: "right" } },
+                            { id: "t_total_label", type: "Text", x: 400, y: 76, width: 120, height: 28, content: "TOTAL:", style: { fontSize: "16px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } },
+                            { id: "t_total_val", type: "Text", x: 530, y: 76, width: 150, height: 28, content: "${[sum(subtotal) * 1.19]}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } }
+                        ]
+                    },
+                    {
+                        id: "pf_pagina", type: "PageFooter", height: 30,
+                        elements: [
+                            { id: "t_pagina", type: "Text", x: 0, y: 8, width: 680, height: 16, content: "Página {{Page}} de {{TotalPages}}", style: { fontSize: "9px", color: "#94a3b8", textAlign: "center" } }
+                        ]
+                    }
+                ],
+                watermark: { text: "", opacity: 0 }
+            },
+            dataSources: [
+                { id: "ds_factura", alias: "factura", enabled: true, isManual: true, manualData: [facturaData] },
+                { id: "ds_items", alias: "items", enabled: true, isManual: true, manualData: itemsData }
+            ],
+            documentType: "Report"
+        };
+        // Asignar al viewer
+        var viewer = document.getElementById('reportViewer');
+        viewer.definition = definition;
+        viewer.data = { factura: [facturaData], items: itemsData };
+        // Botones
+        $('#btnPdf').click(function() { viewer.exportPdf(); });
+        $('#btnExcel').click(function() { viewer.exportExcel(); });
+        $('#btnCsv').click(function() { viewer.exportCsv(); });
+        $('#btnReload').click(function() {
+            viewer.definition = null;
+            setTimeout(function() { viewer.definition = definition; }, 50);
+        });
+    });
+    </script>
+</body>
+</html>