Comment intégrer fichier PDF avec le réactif de largeur

Je suis incorporation de 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>

Il fonctionne, mais je veux mettre le pdf largeur pour correspondre à la largeur de la div contenant. Actuellement, il montre, comme une iframe avec les barres de défilement, afin de visualiser l'ensemble du document pdf, vous devez faire défiler de droite à gauche. Je veux le fichier pdf afin de les adapter à la largeur du conteneur.

Comment puis-je résoudre ce problème? Je suis de soutien IE8 et jusqu'.

Ici est un jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/

  • double possible de Est-il possible d'avoir un fichier PDF ouvert à un prédéfini grossissement dans Adobe Reader?
  • cochez cette liens: SOI - Q->A et les paramètres de la page 6
  • cette méthode n'affecte pas la visionneuse de fichiers pdf dans le navigateur
  • que voulez-vous dire exactement? -> le paramètre devrait affecter la façon dont le pdf est affiché dans le visualiseur-objet (cochez (Docu)[partners.adobe.com/public/developer/en/acrobat/...). c'est probablement depence sur le Navigateur et la version du plugin. le spectateur-objet lui-même ne peut être redimensionnée en html/css moyens. ou ne suis-je pas comprendre, ce que vous êtes allusion à?
  • je veux dire que le fichier pdf est affiché de la même manière dans le visualiseur d'objets sur tous les navigateurs que j'ai testé sur. Il semble seulement avoir un effet lors de l'ouverture dans reader ou acrobat. (lien un peu mal btw)
  • grâce 4 l'info sur le lien, le lien est le même que ci-dessus, le acrobat docu. Je viens de tester à nouveau(IE 11), et il fonctionne. btw: la question visait à IE8+, pas tous les navigateurs (voir et de la question) ce lien -> Lien vers le doku devrait ouvrir le docu zoom à 300% lors de l'ouvrir avec IE (ou, au moins, IE11, n'a pas voulu démarrer ma VM pour les anciennes versions)
  • Une alternative est de convertir PDF en image. Je ne pense pas que vous pouvez définir tous les navigateurs pour afficher mêmes, parce qu'ils utilisent différents logiciels de rendu de Chrome dispose de sa propre visionneuse PDF par exemple, ce qui est difficile à changer pour "normal" utilisateurs)

InformationsquelleAutor emersonthis | 2013-05-09
  1. 27

    Simplement faire 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>
    • Cela fonctionne bien, créé dabblet.com/gist/1cddeeb1cbc89f0a9061 pour un test aussi, de jouer avec la largeur et de la hauteur
    • Je vois les barres de défilement horizontale sur mobile tailles. Ne semble pas être entièrement réactive.
    InformationsquelleAutor dhanasekar
  2. 9

    Si vous êtes en utilisant Bootstrap 3, vous pouvez utiliser le code réactif de classe et de définir le rembourrage, le bas, la hauteur divisée par la largeur et un peu plus de barres d'outils. Par exemple, pour afficher un 8.5 par 11 PDF, utilisez 130% (11/8.5) et un peu plus (20%).

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

    Voici le Bootstrap CSS:

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

    J'ai fait cette erreur une fois - l'incorporation des fichiers PDF en pages HTML. Je vous suggère d'utiliser une bibliothèque JavaScript pour afficher le contenu du fichier PDF. Comme https://github.com/mozilla/pdf.js/

    • Il n'est pas parfait, malheureusement. Mais un grand nombre de fichiers Pdf, j'ai essayé de regarder terrible à cause d'un problème de police. (Chrome 38/Windows 7)
    InformationsquelleAutor chrwahl
  4. 1
    <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>
    • le responsive largeur désigne le pdf à l'intérieur de l'pdf-viewer objet, non pas l'objet d'hébergement le visionneur pdf
    InformationsquelleAutor Surya R Praveen
  5. 0
    <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>
    InformationsquelleAutor Jules S.