Comment intégrer une visionneuse de PDF dans une page ?

Question

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

Answer 1

Veillez à tester toute solution en fonction des différentes préférences des lecteurs. Un visiteur du site peut avoir configuré son navigateur 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 parce que j'ai des versions différentes d'Adobe Acrobat et d'Adobe Reader, mais il semble que vous devez 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 lorsqu'un visiteur regarde ce qui semble être une page web utilisable et que son navigateur lui demande d'ouvrir un fichier PDF qu'il pense ne pas avoir demandé. Dans certains cas, le fichier PDF s'est ouvert spontanément dans Adobe Reader, et non dans le navigateur, et dans d'autres cas, le navigateur a affiché une boîte de dialogue indiquant que le fichier n'existait pas.

J'ai rencontré de telles incompatibilités avec les iframe et les objets, des problèmes différents pour des codes différents.

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

Answer 2

En utilisant bootstrap, vous pouvez avoir un fichier incorporé réactif et adapté aux mobiles.

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

Answer 3

Pdf2htmlEX de coolwanglu est probablement la meilleure solution pour convertir un fichier pdf en html. Vous pouvez faire une simple conversion et ensuite intégrer la page html comme une iframe ou quelque chose de similaire.

Answer 4

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

Il aplatit considérablement les PDF tout en conservant la netteté du texte, ce qui signifie que le chargement sera beaucoup plus rapide sur les appareils mobiles.

Answer 5

<iframe src="https://docs.google.com/viewer?url=**https://www.fsc.esn.ac.lk/sites/default/files/2021-10/AcSchedule.pdf**&embedded=true" style="width:100%; height:500px;" frameborder="0"></iframe>

Devrait remplacer l'URL https://www.fsc.esn.ac.lk/sites/default/files/2021-10/AcSchedule.pdf avec votre propre adresse