57 Previsualización de Tickets en Modal: Integrando iFrame y Flux UI en Laravel para Impresión 🖼️🖨️

Duración: 9 min
Módulo: Módulo Prestamos y Pagos Lección 16 de 18

¡Contenido Exclusivo!

Adquiere este curso para tener acceso inmediato a esta y a **todas las lecciones Premium**.

Inscribirse Ahora por $10.00 Acceso instantáneo de por vida y código fuente incluido.
Anterior
56 Generación de Tickets de Pago en Laravel 12 con DomPDF: Comprobantes Térmicos y Diseño CSS 📄🖨️
Siguiente
58 Cómo Revertir Pagos en Laravel 12: Lógica de Borrado Lógico y Restauración de Cuotas 🔄⚠️

Descripción

🖼️ Lección 57: Previsualización de Tickets en Modal con iFrame

En esta sesión de Benji V2, optimizamos el flujo de impresión de comprobantes. En lugar de redirigir al usuario a una pestaña externa para ver el PDF, implementamos una ventana modal moderna que permite previsualizar y mandar a imprimir el ticket directamente desde la vista del préstamo.

🛠️ Integración de Ventana Modal (Flux UI)

Reutilizamos los componentes de Flux UI para crear una experiencia integrada:

  • 🔄 Modal Trigger: Sustituimos el enlace directo por un disparador de modal (flux:modal.trigger). El botón ahora es de color amarillo con un icono de impresora (printer), lo que lo hace visualmente distintivo [03:04].
  • 📏 Ajuste de Dimensiones: Configuramos el modal con un ancho máximo de 6XL para asegurar que el ticket se vea con claridad, eliminando elementos innecesarios del formulario anterior para dejar espacio al contenido del recibo [03:37].

🖥️ Uso de iFrame para Visualización de PDF

Para embeber el documento generado por DomPDF dentro del sistema, utilizamos la etiqueta <iframe>:

  • 🔗 Ruta Dinámica: El src del iFrame apunta a la ruta del controlador de pagos que genera el PDF, pasando el ID correspondiente de cada cuota [06:14].
  • 🎨 Estilizado de Altura: Aplicamos estilos específicos (altura de aproximadamente 650px) para que el ticket se visualice completamente de forma vertical, simulando el papel de una impresora térmica [08:36].

🚀 Ventajas del Nuevo Flujo

Esta implementación ofrece beneficios significativos en la operativa diaria:

  1. Velocidad: El administrador no pierde el contexto de la página actual; puede cobrar, abrir el modal, imprimir y cerrar en segundos [09:03].
  2. Acciones Nativas: Al usar un iFrame con PDF, el usuario mantiene acceso a las herramientas nativas del navegador, como descargar el archivo (para enviarlo por WhatsApp o correo) o seleccionar la impresora térmica configurada [09:30].
  3. Estética Profesional: El sistema se siente más robusto y moderno al manejar sus propios reportes dentro de su interfaz gráfica.

✅ Resultado de la Lección

Al finalizar, hemos completado el ciclo de pago profesional. El sistema ahora permite cobrar, visualizar el recibo instantáneamente en un modal y gestionar la impresión física, todo sin salir de la ficha del préstamo del cliente.

$10.00
Iniciar sesión para inscribirse

Lecciones

Introducción e instalación
Lección 1. 01 Presentación al Curso Laravel Desarrollo de Sistema de Préstamos y Cobranzas V2 Módulos Completos 10 min
Lección 2. 02 Instalación y Auth: 🛠️ Creando el Login Profesional del Sistema de Préstamos y Cobranzas 🔑 23 min
Lección 3. 03 Autenticación de Dos Factores (2FA) con Laravel Starter Kit 🛡️ | Paso a Paso 🔑 10 min
Lección 4. 04 Cómo subir un proyecto de Laravel 12 a GitHub en 2026 🖥️ | Guía Completa 9 min
Lección 5. 05 💻 | Cómo Crea un Virtual Host con WampServer para Laravel 12 ¡DEJA DE USAR ARTISAN SERVE! ⚡ 7 min
Módulo Ajustes del sistema
Lección 1. 06 💰 | Módulo Ajustes del Sistema: Control de Interes, Monedas, Perfil Global y otros Laravel 12 🛠️ 14 min
Lección 2. 07 🛠️ Creando un Componente Card Reutilizable para Formularios Pro | Laravel 12 & Tailwind & FluxUI 28 min
Lección 3. 08 🚀 | Construyendo el Formulario de Ajustes: Inputs con Iconos y Preview de Imagen | Laravel 12 🛠️ 23 min
Lección 4. 09 🔄 Del Formulario a la Base de Datos: Implementando la Función Store | Laravel 12 🛠️Guardar Datos 14 min
Lección 5. 10 🖼️ Gestión de Archivos y Alertas Pro: Subiendo el Logo y SweetAlert2 | Laravel 12🚀 Notificaciones 14 min
Lección 6. 11 ✅ | ¡Módulo de Ajustes Listo! Traer Información y Guardar Cambios | Laravel 12 💰 18 min
Módulo Roles
Lección 1. 12 🛡️ | Instalación de Laravel Spatie Permissions: Roles y Permisos en Laravel 12 | Benji V2 🚀 9 min
Lección 2. 13 🔑 | Gestión de Roles: Creando el Controlador y la Interfaz de Usuario | Laravel 12 & Flux UI 🚀 18 min
Lección 3. 14 📋 | Listado de Roles: Creando una Tabla Profesional con Tailwind CSS | Laravel 12 🚀 11 min
Lección 4. 15 ➕ Creando Nuevos Roles: Formulario de Registro y Validación | Laravel 12 & Spatie 🛡️ 17 min
Lección 5. 16 🌐 | Laravel en Español: Traduciendo Validaciones y Mensajes de Error 🛠️Configuración de Idioma 9 min
Lección 6. 17 🔍 Implementando el Método Show: Visualización de Roles en Detalle | Laravel 12 🛠️Mostrando Datos 12 min
Lección 7. 18 🔄 Actualización de Roles en Laravel 12: Método Edit, Update y Validación de Nombres Únicos 🛠️ 10 min
Lección 8. 19 💣 Método Destroy: Cómo Eliminar Registros con Validación y Alertas Pro en Laravel 12 ✨ 9 min
Módulo Usuarios
Lección 1. 20 👤 Módulo Usuarios: Estructura de Base de Datos y Nuevos Atributos | Benji V2 🔐 Migración nueva 21 min
Lección 2. 21 🛠️ Gestión de Usuarios: Listado, Visualización Dinámica | Laravel 12 🔐 Tablas Responsivas 18 min
Lección 3. 22 👤 Formulario de Creación de Usuario - Registro de Usuarios Flux UI Selects, Enums Laravel 12 🛠️ 21 min
Lección 4. 23 💾 Backend Guardado de Usuarios: Validación Masiva, Upload de Fotos y Roles Spatie | Laravel 12 🛠️ 17 min
Lección 5. 24 🛠️ Detalles de Usuario: Layout de 2 Columnas, Breadcrumbs y Gestión de Imágenes | Laravel 12 🚀 11 min
Lección 6. 25 ⚙️ Método Update: Cómo actualizar Fotos de Perfil y Sincronizar Roles de Spatie | Laravel 12 🚀 17 min
Lección 7. 26 Eliminación Suave de Usuarios (Soft Deletes) en Laravel 12 - Sistema de Préstamos Laravel 12 🗑️ 8 min
Lección 8. 27 Cómo Restaurar Usuarios Eliminados en el Sistema de Préstamos Método Restore y WithTrashed 16 min
Módulo clientes
Lección 1. 28 Módulo Clientes Modelado de Datos: Diagrama Entidad Relación (DER) Laravel Sistema de prestamos 17 min
Lección 2. 29 Cómo crear Datos de Prueba con Factories - Módulo Clientes Laravel Factories y Faker 🚀 21 min
Lección 3. 30 Listado de Clientes con Laravel 12: Tabla Pro en el Sistema de Préstamos 📑🚀 17 min
Lección 4. 31 Optimiza tu Sistema: Paginación de Datos en Laravel 12 (Fácil y Rápido) ⚡Módulo Clientes 📑🚀 14 min
Lección 5. 32 Cómo crear Buscador de Clientes 🔍 + Código Fuente GRATIS 🎁 Sistema de Préstamos en Laravel 20 min
Lección 6. 33 Formulario de Registro de Clientes: Funciones Create y Store en Laravel 12 📝 en el Sistema de prestamos 16 min
Lección 7. 34 Cómo Visualizar Detalles del Cliente: Método Show en Laravel 12 👁️📂 en el Sistema de Prestamos 17 min
Lección 8. 35 Cómo Editar y Actualizar Clientes en Laravel 12: Método Edit, Update y Validaciones Pro 📝🚀 20 min
Lección 9. 36 Eliminar y Restaurar Clientes en Laravel 12: Soft Deletes y Recuperación de Registros 🗑️♻️ 23 min
Módulo Categorías
Lección 1. 37 Módulo de Categorías en Laravel 12: Estructura, Migraciones y Modelo - Sistema de Préstamos 🏗️📂 11 min
Lección 2. 38 Crear Categorías con Modales de Flux UI en Laravel 12: Interfaz Moderna y Profesional 💎🚀 14 min
Lección 3. 39 Cómo mostrar Detalles de Categorías en Laravel 12: Método Show dentro de cada modal 👁️💎 10 min
Lección 4. 40 Editar y Actualizar Categorías con Modales de Flux UI en Laravel 12: Manejo de Validaciones 🛠️✅ 14 min
Lección 5. 41 Cómo Eliminar Categorías con Modales de Flux UI en Laravel 12: Confirmación y Borrado Seguro 🗑️🔥 11 min
Módulo Prestamos y Pagos
Lección 1. 42 Módulo de Préstamos en Laravel 12: Arquitectura, Migraciones y Relaciones entre Modelos 💰🏗️ 15 min
Lección 2. 43 Dashboard Profesional con Chart.js y Flux UI: Gráficas y Estadísticas en Vivo - Laravel 12 📊🔥 15 min
Lección 3. 44 Cálculo de Préstamos en Laravel 12: Métodos de Amortización Francés, Alemán y Americano 🧮💰 16 min
Lección 4. 45 Guardar Préstamos en Laravel 12: Método Store, Validaciones y Registro de Cuotas en la BD 💰📥 26 min
Lección 5. 46 Módulo de Pagos en Laravel 12: Migración, Estructura de Cuotas y Control de Estados 💳📊 13 min
Lección 6. 47 Registro Automática de Cuotas en Laravel: Insertando la Tabla de Amortización en la BD ⚡💰 22 min
Lección 7. 48 SISTEMA DE PRÉSTAMOS PROFESIONAL: Código Fuente Completo, Laravel 12 y Flux UI 🎁🚀 ¡GRATIS! 17 min
Lección 8. 49 Vista Detallada de Préstamos en Laravel 12: Tabla de Amortización, Progreso y Estados de Pago 💎📊 15 min
Lección 9. 50 Edición Dinámica de Préstamos en Laravel 12: Recalculando Amortizaciones con JavaScript y Blade 16 min
Lección 10. 51 Cómo Eliminar Préstamos en Laravel 12: Borrado en Cascada y Modales de Confirmación Flux 🗑️⚠️ 12 min
Lección 11. 52 Registro de Pagos en Laravel 12: Formulario de Cobranzas y Validación de Cuotas con Flux UI 💳✅ 23 min
Lección 12. 53 Configuración de Días de Gracia y Registro de Pagos en Laravel 12: Lógica de Cobro y Ajustes ⚙️💸 17 min
Lección 13. 54 Lógica de Mora y Días de Gracia en Laravel 12: Cálculos Automáticos de Atraso y Notificaciones 📉🔔 12 min
Lección 14. 55 Cobro de Cuotas con Mora Automática en Laravel 12: Formulario de Pago Dinámico y Flux UI 💸🚀 12 min
Lección 15. 56 Generación de Tickets de Pago en Laravel 12 con DomPDF: Comprobantes Térmicos y Diseño CSS 📄🖨️ 36 min
Lección 16. 57 Previsualización de Tickets en Modal: Integrando iFrame y Flux UI en Laravel para Impresión 🖼️🖨️ 9 min
Lección 17. 58 Cómo Revertir Pagos en Laravel 12: Lógica de Borrado Lógico y Restauración de Cuotas 🔄⚠️ 19 min
Lección 18. 59 Cierre Automático de Préstamos en Laravel 12: Lógica de Finalización y Control de Estados 🏁✅ 21 min
Módulo Contratos
Lección 1. 60 Contrato de Préstamo en Laravel 12: Generación de Documentos Legales con DomPDF y Estilos CSS 📄✍️ 13 min
Lección 2. 61 Dashboard Financiero en Laravel 12: Gráficos de Cartera, Capital Recuperado y Análisis de Datos 📊 15 min
Módulo Notificaciones
Lección 1. 62 Módulo de Notificaciones en Laravel: Gestión de Clientes Morosos y Alertas por Email WhatsApp 📱📢 15 min
Lección 2. 63 Configuración de Mailtrap en Laravel 12: Envío de Correos y Recuperación de Contraseñas 📧🔐 11 min
Lección 3. 64 Notificaciones de Cobro Automáticas en Laravel 12: Plantilla HTML y Envío Masivo de Correos 📧🔥 19 min
Lección 4. 65 Notificaciones por WhatsApp en Laravel 12: Envío de Recordatorios con un Clic y Formato Pro 📱🔥 10 min
Módulo Permisos
Lección 1. 66 Seguridad Total en Laravel 12: Protegiendo Rutas con Middleware Spatie y Permisos Dinámicos 🛡️🔐 14 min
Lección 2. 67 Configuración Masiva de Roles y Permisos en Laravel 12: RoleSeeder y Estructura con Spatie 👑🛠️ 12 min
Lección 3. 68 Gestión de Permisos por Rol en Laravel 12: Tabla Pivote y Visualización de Accesos con Spatie 🔑📊 17 min
Lección 4. 69 Interfaz Pro de Permisos en Laravel 12: Agrupación por Módulos y Sincronización con Spatie 🛠️📋 10 min
Módulo Backups
Lección 1. 70 Backups Automáticos en Laravel 12: Instalación de Spatie Backup y Seguridad de Datos 💾🛡️ 18 min
Lección 2. 71 Panel de Control de Backups en Laravel 12: Descargar, Eliminar y Crear Respaldos desde la Web 📁⚙️ 16 min
Módulo Reportes
Lección 1. 72 Métricas y Estadísticas en Laravel 12: Analizando el Crecimiento Mensual y Préstamos Activos 📊🚀 13 min
Lección 2. 73 Gráficos Avanzados con Chart.js en Laravel 12: Comparativa Capital vs. Interés Mensual 📊💸 9 min
Módulo Producción
Lección 1. 74 Cómo Subir Laravel 12 a Producción: Despliegue Real, Configuración de Servidor y Optimización 🌐🚀 13 min
Lección 2. 75 Cómo Subir Laravel 12 a Producción: Despliegue Real, Configuración de Servidor y Optimización 🌐🚀 13 min
Lección 3. 76 Entrega de Manual de Usuario y Puesta en Marcha del Sistema de Préstamos 🏦📘 19 min
Lección 4. 77 Mostrar Roles de Usuario en la Interfaz: Personalización con Flux UI y FontAwesome 🛡️👤 13 min
Lección 5. 78 Seguridad en la Interfaz: Protegiendo Menús y Dashboard con Directivas @can en Laravel 12 🔐 16 min
Lección 6. 79 Personalizar Error 403 en Laravel 12: Diseñando una Pantalla de Acceso Denegado con Flux UI 🚫🛡️ 13 min
Módulo Pagos Parciales
Lección 1. 80 Módulo Pagos Parciales en Laravel 12: Creación de Migraciones y Lógica de Abonos a Cuotas 💳📉 14 min
Lección 2. 81 Interfaz de Pagos Parciales: Implementación de Modales Dinámicos con Flux UI en Laravel 12 💸 19 min
Lección 3. 82 Registrar Abonos en la Base de Datos: Lógica del Controlador y Validaciones en Laravel 12 💾🛠️ 15 min
Lección 4. 83 Historial de Abonos en Tiempo Real: Listado de Pagos Parciales con Blade y Carbon en Laravel 🗓️💰 13 min
Lección 5. 84 Automatización de Cobros: Cálculo de Saldos y Cierre Automático de Cuotas en Laravel 12 ⚙️💳 23 min
Lección 6. 85 Liquidación Automática de Préstamos: Cierre de Deuda y Reporte de Abonos en Laravel 12 💸📜 20 min
Lección 7. 86 Reversión de Pagos y Abonos: Lógica de Anulación y Reapertura de Préstamos en Laravel 12 🔄🛠️ 16 min
Lección 8. 87 Eliminación de Abonos Parciales: Recálculo de Saldos y Reapertura de Estados en Laravel 12 🔄📉 23 min
Módulo Liquidación de Préstamo
Lección 1. 88 Liquidación de Préstamos: Cómo Cerrar Deudas y Archivarlas Correctamente en Laravel 12 ✅📦 19 min
Lección 2. 89 Liquidación Inteligente: Cálculo de Interés Devengado y Mora Proporcional en Laravel 12 🧮💰 20 min
Lección 3. 90 Procesar Liquidación de Préstamos con Modal Interactivo y Transacciones en Laravel 12 💳✅ 22 min
Lección 4. 91 Vista Previa del Modal de Liquidación: Modal Interactivo con Desglose de Deuda en Laravel 12 👁️💰 12 min
Lección 5. 92 Procesar y Finalizar Liquidación: Ajuste de Cuotas y Diferencia de Intereses en Laravel💳🔐 Parte 1 20 min
Lección 6. 93 Procesar y Finalizar Liquidación: Ajuste de Cuotas y Diferencia de Intereses en Laravel💳🔐 Parte 2 18 min
Últimos Ajustes del Sistema
Lección 1. 94 Categorías de Préstamos: Porcentaje de Interés Dinámico por Tipo de Crédito en Laravel 12 📊💼 18 min
Lección 2. 95 Interfaz Cargar Tasa de Interés Automáticamente al Seleccionar Categoría con JavaScript 🚀💻 12 min
Lección 3. 96 Personalización de Menú Profesional en Español (Ajustes + Cerrar Sesión) 🔐⚙️ 12 min
Lección 4. 97 Como conservar 5 Backups como Máximo, Limpieza Automático para Ahorrar Espacio en Disco 11 min
Lección 5. 98 Auditoría en Laravel: Registrar Usuario que Creó el Préstamo y Mostrar en Tabla 👤📋Prestamos 11 min
Lección 6. 99 Traduciendo Login, Validaciones y Más en Laravel - Cómo Traducir Todo tu Sistema al Español 🇪🇸✨ 17 min
Lección 7. 100 Página 404 Personalizada en Laravel: Diseño Elegante y Profesional para tu Sistema 🚫✨ 7 min
Lección 8. 101 Eliminación Segura con SweetAlert: Evita Borrar Datos Relacionados en Laravel 🛡️🗑️ 15 min
Lección 9. 102 🎉 Curso Completado: Sistema de Préstamos y Cobranzas en Laravel - Despedida y Próximos Pasos 🚀 10 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso