web-dev-qa-db-fra.com

Comment intégrer PDF fichier avec largeur de réponse

J'intègre des fichiers pdf en utilisant quelque chose comme ceci:

<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>

Cela fonctionne, mais je veux définir la largeur du fichier PDF pour correspondre à la largeur de la div contenant. Actuellement, il se présente comme un iframe avec des barres de défilement. Par conséquent, pour afficher le fichier PDF en entier, vous devez faire défiler de droite à gauche. Je veux que le pdf s'adapte à la largeur du conteneur.

Comment puis-je réparer ça? Je soutiens IE8 et plus.

Voici un jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/

htmlcssobjectpdfembed
31
emersonthis

Faites simplement ceci:

<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>
26
dhanasekar

Si vous utilisez Bootstrap 3, vous pouvez utiliser la classe embed-responsive et définir le bas de remplissage comme étant la hauteur divisée par la largeur plus un petit supplément pour les barres d’outils. Par exemple, pour afficher un fichier PDF 8,5 sur 11, utilisez 130% (11/8,5) plus un petit supplément (20%).

<div class='embed-responsive' style='padding-bottom:150%'>
    <object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>

Voici le CSS Bootstrap:

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
9
C. David Maxey

J'ai commis cette erreur une fois en incorporant des fichiers PDF dans des pages HTML. Je vais vous suggérer d'utiliser une bibliothèque JavaScript pour afficher le contenu du PDF. J'aime https://github.com/mozilla/pdf.js/

3
chrwahl
<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>
1
Surya R Praveen
<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>
0
Jules S.