Puedes integrar un archivo PDF en un documento HTML utilizando las etiquetas <embed>, <iframe> o <object>. Observa los ejemplos a continuación.
Ejemplo de PDF Responsivo Incrustado
Aquí hay un ejemplo completo sobre la estructura HTML para incrustar un documento PDF.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Responsivo Incrustado</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.pdf-container {
width: 100%;
max-width: 800px; /* Puedes ajustar el ancho máximo según tus necesidades */
margin: 0 auto;
}
object {
width: 100%;
height: 600px; /* Puedes ajustar la altura según tus necesidades */
}
</style>
</head>
<body>
<div class="pdf-container">
<object data="English.I.Use.Every.Day.pdf" type="application/pdf">
<p>El navegador no puede mostrar este archivo PDF. Puedes descargarlo <a href="English.I.Use.Every.Day.pdf">aquí</a>.</p>
</object>
</div>
</body>
</html>
Puedes obtener un resultado similar a la siguiente imagen (he usado como ejemplo una guía PDF sobre frases cotidianas en inglés -como programador, es importante aprender inglés):
Embeber un PDF usando la Etiqueta <embed>
<embed src="ruta/a/tu.pdf" width="800" height="500" type='application/pdf'>Sin embargo, para hacerlo responsive en dispositivos móviles, escribe el siguiente CSS.
embed {
width: 100%; /* para hacerlo responsive */
height: 100vh;
}Esto añadirá una barra de desplazamiento horizontal en pantallas más pequeñas. En el escritorio, se verá como en la captura de pantalla a continuación.
Puedes hacer lo mismo con las etiquetas <iframe> y <object>.
Embeber un PDF usando la Etiqueta <iframe>
<iframe src="ruta/a/tu.pdf" width="800" height="500"></iframe>iframe {
width: 100%; /* para hacerlo responsive */
height: 100vh;
}Embeber un PDF usando la Etiqueta <object>
<object data="ruta/a/tu.pdf" type="application/pdf" width="800" height="500">
<p>Parece que tu navegador no tiene un visor de PDF incorporado.
No hay problema... puedes <a href="ruta/a/tu.pdf">hacer clic aquí para
descargar el archivo PDF.</a></p>
</object>object {
width: 100%; /* para hacerlo responsive */
height: 100vh; /* opcional, dependiendo de tus preferencias */
}Incorporar un PDF con la etiqueta <object> tiene una ventaja adicional. Si el navegador de alguien no tiene un visor de PDF integrado, verá un mensaje personalizado y podrá descargar el PDF.
Mira un ejemplo en vivo a continuación:
Este documento es parte de Notes for Professionals. Lo puedes encontrar en nuestro Pack HTML.
Ahora tienes los tres ejemplos. Ya has aprendido cómo hacer que el PDF integrado sea responsive en dispositivos móviles.
Nota
Conclusión
Se ha explicado diferentes métodos para integrar archivos PDF en documentos HTML. Además, aprendiste cómo hacerlo responsive en dispositivos móviles.
Si aún tienes alguna confusión, házmelo saber.
