34 Como hacer un visor de PDF en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack (2)

Duración: 8 min
Módulo: 📄 Listado y Visualización de Archivos Lección 5 de 7

Descripción

📄 Lección 34: Cómo Hacer un Visor de PDF en las Carpetas

Este capítulo continúa con la mejora del visor de archivos modal, enfocándose en la implementación de la visualización de documentos PDF utilizando el mismo enfoque condicional introducido en la lección anterior.

🛠️ Implementación del Visor de PDF

El instructor extiende la lógica condicional (if / elseif) para incluir la visualización de archivos con la extensión pdf:

  1. Lógica Condicional: Se añade un bloque elseif para manejar los archivos cuya $extension es igual a pdf [00:49].
  2. Etiqueta HTML para PDF: La diferencia clave con respecto a las imágenes es la etiqueta HTML utilizada para incrustar el contenido. En lugar de <img>, se utiliza la etiqueta <iframe> (Inline Frame), ya que los navegadores modernos pueden renderizar documentos PDF directamente dentro de un iframe [01:06].
  3. Ruta como src: La ruta del archivo ($archivo->nombre, storage/, etc.) se asigna al atributo src del <iframe>, permitiendo que el navegador lo muestre [01:36].

📐 Mejoras Estructurales del Modal

Debido a que los archivos PDF suelen ser documentos más grandes y requieren más espacio de visualización que una imagen, el instructor realiza ajustes en la estructura del modal:

  • Aislamiento de la Lógica: Para ordenar el código, la lógica de la ventana modal que estaba fuera del bucle se introduce dentro de las condiciones if / elseif, de modo que cada tipo de extensión puede tener un modal con diferente diseño [03:07].
  • Modal de Tamaño Extra-Grande (XL): Se modifica la clase del modal para los archivos PDF a modal-xl (extra-large) [02:59], lo que proporciona un ancho mayor, ideal para la lectura de documentos [05:00].
  • Altura Definida: Se define una altura fija (ej. 550px o 600px) para el <iframe> usando estilos en línea (height), asegurando que el documento tenga suficiente espacio vertical dentro del modal [05:34].

El video concluye con la demostración de la carga exitosa de un documento PDF de prueba dentro del modal de gran tamaño [07:38]. El siguiente paso será integrar la visualización de otros tipos de archivos como documentos de Word y videos [07:45].