¿Alguna vez has necesitado agregar un visor de PDF a una página web? Hoy aprenderemos cómo hacerlo de manera fácil y rápida.

No todos los navegadores soportan un <object> para los PDF, así que vamos a utilizar un método que funciona incluso en móviles mediante un iframe.

El primer paso del tutorial es subir el fichero a Google Drive https://drive.google.com

Buscamos el PDF que queremos visualizar en nuestra página. Hacemos clic derecho sobre este para obtener el link del archivo.

En la sección de permisos, debemos de dar clic en la opción «Cualquier persona con este enlace».

Copiamos el enlace y nos dirigimos a nuestra página web. En ella lo que utilizaremos el es ID del archivo proporcionado en la URL. Por ejemplo, si el enlace de nuestro PDF es el siguiente:

https://drive.google.com/file/d/1AAgIlAryQAnyh13PR3-afrX433dinT5I/view?usp=sharing

Lo que necesitaremos para el visor es el ID del mismo (sombreado en negrita):

https://drive.google.com/file/d/1AAgIlAryQAnyh13PR3-afrX433dinT5I/view?usp=sharing

Vamos a nuestra página web y colocamos el siguiente bloque de código. El valor del parámetro srcid lo reemplazamos por nuestro ID:

<iframe src="https://docs.google.com/viewer?srcid=1AAgIlAryQAnyh13PR3-afrX433dinT5I&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="100%" height="680px"></iframe>

¡Eso es todo! El visor se podrá visualizar en nuestra página web.