Enlazar un PDF para que el navegador lo abra es lo más habitual, pero en muchos proyectos interesa mostrarlo directamente dentro de la página, sin que el usuario tenga que salir de ella ni descargarlo. Hay varias formas de conseguirlo y cada una tiene su sitio según el caso.
El tag <embed>: el punto de partida
El tag <embed> lleva décadas siendo la referencia para incrustar contenido externo en HTML. Su sintaxis es directa:
<embed src="documento.pdf" type="application/pdf" width="100%" height="600px">
Funciona bien en escritorio cuando el navegador tiene el visor de PDF activado, lo que es el caso por defecto en Chrome, Firefox y Edge modernos. En móvil el comportamiento es más irregular: algunos dispositivos iOS y Android descargan el fichero en lugar de mostrarlo.
Parámetros de visualización
Añadiendo un fragmento # a la URL del PDF puedes controlar cómo se presenta el documento. Los más útiles son:
- page=5 abre el PDF en la página indicada
- zoom=100 establece el nivel de zoom en porcentaje
- view=Fit ajusta la página a la ventana visible
- toolbar=0 oculta la barra de herramientas del visor
- navpanes=0 oculta los paneles de navegación lateral
- scrollbar=0 oculta la barra de desplazamiento
Ejemplo combinado que abre en la página 3, con zoom al 100% y sin barra de herramientas:
<embed src="documento.pdf#page=3&zoom=100&toolbar=0&navpanes=0"
type="application/pdf" width="100%" height="600px">
Estos parámetros los interpreta el visor de PDF del navegador, no el estándar HTML. Chrome y Edge los soportan bien; Firefox tiene soporte parcial y Safari prácticamente los ignora.
El tag <object>: con contenido alternativo
<object> es la alternativa más semántica a <embed> y permite incluir un bloque de fallback que se mostrará si el navegador no puede renderizar el PDF:
<object data="documento.pdf" type="application/pdf" width="100%" height="600px">
<p>Tu navegador no puede mostrar este PDF.
<a href="documento.pdf">Descárgalo aquí</a>.</p>
</object>
El soporte entre navegadores es similar al de <embed>, pero el bloque de fallback hace que la página no quede rota para usuarios en móviles donde el visor no funciona.
El iframe: la opción más usada hoy
El <iframe> se ha convertido en la forma más habitual de incrustar PDFs en la práctica. No necesita el atributo type y en Chrome, Edge y Firefox modernos funciona sin configuración adicional:
<iframe src="documento.pdf" width="100%" height="600px" style="border:none;">
<p>Tu navegador no soporta iframes.
<a href="documento.pdf">Descarga el PDF</a>.</p>
</iframe>
Admite los mismos parámetros de URL que <embed>. La limitación es la misma: en móvil el resultado depende del navegador y del sistema operativo.
PDF.js: la solución para producción
PDF.js es la librería de Mozilla que renderiza PDFs directamente en un canvas HTML5, sin depender del visor del sistema. Es la opción cuando el comportamiento en móvil importa o cuando necesitas personalizar la experiencia.
La forma más rápida de usarlo es cargar su visor preconfigurado dentro de un iframe:
<iframe src="/pdfjs/web/viewer.html?file=/docs/documento.pdf"
width="100%" height="700px" style="border:none;">
</iframe>
Si prefieres inicializarlo desde JavaScript para tener control total sobre la renderización:
<canvas id="pdf-canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js';
pdfjsLib.getDocument('documento.pdf').promise.then(pdfDoc => {
pdfDoc.getPage(1).then(page => {
const canvas = document.getElementById('pdf-canvas');
const ctx = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1.5 });
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({ canvasContext: ctx, viewport }).promise;
});
});
</script>
PDF.js funciona igual en móvil que en escritorio, soporta PDFs protegidos con contraseña si la facilitas por código, y permite implementar búsqueda en el texto, miniaturas de páginas o impresión personalizada.
Google Docs Viewer: para PDFs alojados en servidor público
Si el PDF está accesible en una URL pública, Google Docs Viewer permite mostrarlo sin instalar nada en el servidor:
<iframe src="https://docs.google.com/viewer?url=https://ejemplo.com/documento.pdf&embedded=true" width="100%" height="600px" style="border:none;"> </iframe>
Es útil para prototipos o cuando no controlas el servidor. El inconveniente: el PDF tiene que ser accesible desde internet (no sirve para PDFs internos o en local) y dependes de la disponibilidad del servicio de Google, que no garantiza uptime para este endpoint.
Qué opción elegir
Método | Móvil | Sin dependencias | Fallback | Cuándo usarlo |
| Irregular | Sí | No | Intranets o entornos controlados |
| Irregular | Sí | Sí | Cuando necesitas fallback visible |
| Irregular | Sí | Sí | Uso general en escritorio |
PDF.js | Muy bueno | No (librería JS) | N/A | Producción, móvil, personalización |
Google Docs | Bueno | No (servicio externo) | No | PDFs públicos, prototipos rápidos |
Para una web de empresa o tienda donde el PDF tiene que verse bien en móvil, PDF.js es la opción más fiable. Para un panel de administración o intranet donde los usuarios están en escritorio, un <iframe> con los parámetros de URL adecuados resuelve el problema sin añadir dependencias. Si solo necesitas mostrar un PDF externo rápidamente, Google Docs Viewer es suficiente.
Si te interesa profundizar en otras técnicas de HTML moderno, puedes ver también cómo acceder a la webcam con HTML5 y JavaScript o repasar los fundamentos de HTML para tener una base sólida.
Imagen: Pexels / Lukas Blazek