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
- Una leyenda de Mercedes en la F1 llega a Gran Turismo 7 en su nueva actualización
- Microsoft Flight Simulator 2024 ya está disponible
- Need for Speed Unbound Vol. 9: Prepare for Lockdown
- JUEGA GRATIS A EA SPORTS F1 24 TODO EL FIN DE SEMANA
- Canva presenta las tendencias creativas que dominarán la industria del diseño gráfico en 2025