Comment intégrer une visionneuse PDF dans une page?

Si je ne me trompe pas, Google Docs offre le moyen d'afficher un PDF stocké sur le même serveur que la page Web via un <iframe>, mais j'ai besoin de savoir comment je peux le faire d'une manière compatible avec tous les navigateurs.

Vous pouvez envisager d'utiliser PDFObject de Philip Hutchison.

Sinon, si vous recherchez une solution non Javascript, vous pouvez utiliser un balisage comme celui-ci:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

PDF.js est une expérience technologique HTML5 qui explore la création d'un moteur de rendu PDF (Portable Document Format) fidèle et efficace sans assistance de code natif. Il est géré par la communauté et soutenu par Mozilla Labs.

Vous pouvez voir la démo ici .

Cela pourrait fonctionner un peu mieux de cette façon

<embed src= "MyHome.pdf" width= "500" height= "375">

Si je ne me trompe pas, l'OP demandait (bien que plus tard accepté une solution .js) si le serveur d'affichage PDF intégré de Google afficherait un PDF sur son propre site Web.

Donc, un an et demi plus tard: oui, ça le sera.

Voir http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html . Consultez également https://docs.google.com/viewer et connectez l'URL du fichier que vous souhaitez afficher.

Edit: En relisant, OP demandait des solutions qui n'utilisent pas les iFrames. Je ne pense pas que ce soit possible avec la visionneuse de Google.

essayez avec Flex Paper http://flexpaper.devaldi.com/

ça marche comme scribd

Assurez-vous de tester n'importe quelle solution dans différentes préférences de Reader. Un visiteur du site peut avoir son navigateur configuré pour ouvrir le PDF dans Reader / Acrobat plutôt que dans le navigateur, par exemple en désactivant le plugin Acrobat dans Firefox.

Je ne peux pas être sûr de mes résultats, car j'ai deux plugins Acrobat différents que Firefox reconnaît en raison de mes versions différentes d'Adobe Acrobat et d'Adobe Reader, mais il semble que vous deviez au moins tester ce qui se passe si un visiteur du site Web a son navigateur configuré pour ne pas ouvrir le PDF dans le navigateur. Cela peut être assez ennuyeux quand ils regardent ce qui semble être une page Web autrement utilisable et que leur navigateur les pousse à ouvrir un fichier PDF qu'ils pensent ne pas avoir demandé. Dans certains cas, le fichier PDF s'est ouvert spontanément dans Adobe Reader, pas dans le navigateur, et dans d'autres cas, le navigateur a lancé une boîte de dialogue indiquant que le fichier n'existait pas.

J'ai rencontré de telles incompatibilités avec iframe et object, des problèmes différents pour un code différent.

Ceci est pour du code HTML simple. Je n'ai pas essayé les cadres suggérés.

J'opterais vraiment pour FlowPaper, en particulier leur nouveau mode Elements que l'on peut trouver ici: https://flowpaper.com/demo/

Il aplatit considérablement les PDF tout en gardant le texte net, ce qui signifie qu'il se chargera beaucoup plus rapidement sur les appareils mobiles

en utilisant bootstrap, vous pouvez avoir un premier fichier incorporé réactif et mobile.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

pdf2htmlEX de coolwanglu est probablement la meilleure solution pour convertir un fichier pdf en html. Vous pouvez faire une simple conversion, puis intégrer la page html en tant qu'iframe ou quelque chose de similaire.