Hace unos días un compañero del trabajo me pregunto como podía meter un en un archivo PDF de Adobe en noticia de nuestra web, pero que la gente viera el contenido, en vez de poner un enlace . Os enseñamos como insertar PDF en html dentro de una web. Visor de PDF que usaremos mediante un iframe.
Es una forma de ponder poner el lector en tu página web.
No todos los navegadores soportan un <object> para los PDF. Os contamos un método que funciona incluso en móviles mediante un iframe.
Tutorial Insertar PDF en html dentro de una web. Visor de PDF
El primer paso del tutorial es subir el fichero a Google Drive https://drive.google.com
Una vez subido debemos dar a los tres puntos verticales (arriba a la derecha). Elegiremos compartir y generaremos un enlace.Para ver los documentos de Google Drive desde los enlaces del visor de archivos, use la ID del archivo como srcidatributo en el iframe.
El ID de archivo para su PDF (uno que ya está en Google Drive) se puede encontrar en la dirección web del PDF y es una parte de la url que te da Drive al compartir.
Ejemplo https://drive.google.com/file/d/1AdyzEZ8rhItZZ6PtQpHYsX4MyIpuYHgJ/view?usp=sharing
Nos quedaremos con la parte que esta en negrita y pondremos el siguiente código HTML sustituyendo [identificador] por lo que hemos conseguido
<iframe src="https://docs.google.com/viewer?srcid=[identificador]&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="100%" height="680px"></iframe>
Al final nos queda
<iframe src="https://docs.google.com/viewer?srcid=1AdyzEZ8rhItZZ6PtQpHYsX4MyIpuYHgJ&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="100%" height="680px"></iframe>
Solo los archivos de menos de 25 MB se pueden previsualizar con el visor de Google Drive.
El visor de Google Drive le ayuda a obtener una vista previa de más de 16 tipos de archivos diferentes, que se enumeran a continuación:
- Archivos de imagen (.JPEG, .PNG, .GIF, .TIFF, .BMP)
- Archivos de video (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV)
- Archivos de texto (.TXT)
- Marcas / Código (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
- Microsoft Word (.DOC y .DOCX)
- Microsoft Excel (.XLS y .XLSX)
- Microsoft PowerPoint (.PPT y .PPTX)
- Formato de documento portátil de Adobe (.PDF)
- Páginas de Apple (.PAGINAS)
- Adobe Illustrator (.AI)
- Adobe Photoshop (.PSD)
- Formato de archivo de imagen etiquetado (.TIFF)
- Autodesk AutoCad (.DXF)
- Gráficos vectoriales escalables (.SVG)
- PostScript (.EPS, .PS)
- TrueType (.TTF)
- Especificación de papel XML (.XPS)
- Tipos de archivos de archivo (.ZIP y .RAR)
Espero que os sirva este tutorial.
El resultado es:
Entradas recientes para Insertar PDF en html dentro de una web. Visor de PDF
- Nuki Fob: el llavero inteligente que transforma el acceso al hogar con las cerraduras Nuki
- Elévate más allá en ACE COMBAT 8: Wings of Theve con el regreso de la legendaria franquicia de juegos de aviación y disparos de Bandai Namco
- Análisis del accesorio Nuki Keypad 2: la seguridad doméstica de tu puerta con pin o huella para abrir cerraduras Nuki
- Milestone anuncia la fecha de lanzamiento de Screamer en el tráiler de la historia
- Nintendo gana los premios a Mejor Juego Familiar y Mejor Juego de Deportes The Game Awards 2025 Donkey Kong Bananza y Mario Kart World