Cómo poner un PDF en HTML y añadir un botón de descarga

Para poner un PDF en HTML puedes enlazar el documento, ofrecer su descarga o mostrarlo dentro de la página. La opción más sencilla y robusta es un enlace al archivo: permite que cada dispositivo lo abra con el visor que tenga disponible.

<a href="documentos/catalogo.pdf">Abrir catálogo en PDF</a>

El archivo debe existir en esa ruta. Escribir un enlace no crea el PDF ni lo sube automáticamente al servidor.

Abrir un PDF desde un enlace

Utiliza un texto que indique qué va a abrirse. Si conoces su tamaño, puedes mostrarlo para ayudar a quien utiliza datos móviles, pero mantenlo actualizado.

<a href="documentos/catalogo.pdf"
   target="_blank" rel="noopener">
  Ver catálogo en PDF (abre en otra pestaña)
</a>

El navegador puede abrir su propio visor, lanzar una aplicación o descargar el archivo según la configuración y los encabezados enviados por el servidor. Una nueva pestaña no garantiza un visor integrado.

Cómo crear un botón para descargar un PDF

Para navegar o descargar un recurso, utiliza un enlace con apariencia de botón. No necesitas JavaScript para el caso básico:

<a class="descarga" href="documentos/catalogo.pdf"
   download="catalogo.pdf">Descargar catálogo en PDF</a>
<style>
  .descarga {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 10px;
    background: #1d4ed8;
    color: #fff;
    font: 600 1rem system-ui, sans-serif;
    text-decoration: none;
  }
  .descarga:hover { background: #1e40af; }
  .descarga:focus-visible {
    outline: 3px solid #0f172a;
    outline-offset: 4px;
  }
</style>

download sugiere la descarga y un nombre de archivo. Funciona principalmente para recursos del mismo origen, además de determinados tipos de URL. No puedes asumir que forzará la descarga de un PDF alojado en cualquier dominio externo.

Cómo mostrar un PDF dentro de la página

Si quieres una vista previa, utiliza un iframe y conserva fuera un enlace alternativo:

<section aria-labelledby="titulo-catalogo">
  <h2 id="titulo-catalogo">Catálogo de servicios</h2>
  <iframe class="visor-pdf"
          src="documentos/catalogo.pdf"
          title="Vista previa del catálogo en PDF"
          loading="lazy" width="900" height="700"></iframe>
  <p><a href="documentos/catalogo.pdf">Abrir el PDF por separado</a></p>
</section>
<style>
  .visor-pdf {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 320px;
    border: 1px solid #cbd5e1;
  }
</style>

La visualización depende del navegador y del dispositivo. Algunos móviles ofrecen una experiencia distinta o no muestran el visor como esperas. El enlace alternativo debe permanecer visible, no escondido dentro del marco.

Por qué no funciona la descarga o el visor

• Error 404: revisa el nombre, la carpeta y las mayúsculas del archivo.
• Se abre en lugar de descargarse: comprueba el origen, la configuración del navegador y el encabezado Content-Disposition del servidor.
• El marco aparece vacío: el servidor puede impedir la integración o el dispositivo puede no tener un visor compatible.
• Solicita acceso: el archivo puede estar protegido o requerir una sesión.

No utilices enlaces privados de tu almacenamiento que solo funcionen mientras tú estás conectado. Prueba la URL en una ventana sin sesión antes de compartirla.

Accesibilidad y contenido del PDF

Un iframe con título no hace accesible el documento que contiene. Revisa el propio PDF: texto seleccionable, orden de lectura, encabezados y alternativas cuando sean necesarias. Para información importante, publicar también una versión HTML puede facilitar la lectura en móvil y con tecnologías de asistencia.

No presupongas que insertar el documento garantiza su indexación. La página y el PDF son recursos distintos con sus propias condiciones de acceso y configuración.

Preguntas frecuentes

¿Puedo ocultar los controles del visor?

No existe un control HTML universal que funcione igual en todos los visores de PDF. Evita depender de parámetros específicos para tareas esenciales.

¿El PDF se adapta como una página responsive?

No necesariamente. El contenedor puede ser flexible, pero el documento mantiene su propia maquetación.

Prueba tu documento en ordenador y móvil. Si necesitas organizar el resto de la página, continúa con los tutoriales de HTML y la guía de encabezados.

Referencia técnica: documentación de a en MDN.