Insertar PDF en html dentro de una web. Visor de PDF

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: