html - para - Cómo incrustar un archivo PDF con ancho de respuesta
visualizar archivos pdf en joomla (4)
Estoy incrustando archivos PDF usando algo como esto:
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
Funciona, pero quiero establecer el ancho del pdf para que coincida con el ancho del div que lo contiene. Actualmente se muestra como un iframe con barras de desplazamiento, por lo que para ver el pdf completo, tiene que desplazarse de derecha a izquierda. Quiero que el pdf se ajuste al ancho del contenedor.
¿Cómo puedo solucionar esto? Estoy apoyando IE8 y hasta.
Aquí hay un jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/
Cometí ese error una vez: incrustó archivos PDF en páginas HTML. Sugeriré que use una biblioteca de JavaScript para mostrar el contenido del PDF. Me gusta https://github.com/mozilla/pdf.js/
Si está utilizando Bootstrap 3, puede usar la clase de inserción de inserción y establecer el fondo de relleno como la altura dividida por el ancho más un poco adicional para las barras de herramientas. Por ejemplo, para mostrar un PDF de 8.5 por 11, use 130% (11 / 8.5) más un poco más (20%).
<div class=''embed-responsive'' style=''padding-bottom:150%''>
<object data=''URL.pdf'' type=''application/pdf'' width=''100%'' height=''100%''></object>
</div>
Aquí está el CSS de Bootstrap:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
Simplemente simpl haz esto: -
<object data="resume.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don''t have a PDF plugin for this browser.
No biggie... you can <a href="resume.pdf">click here to
download the PDF file.</a></p>
</object>
</div>
<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn''t have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>