Question Moyen recommandé d'intégrer PDF en HTML?


Quelle est la méthode recommandée pour intégrer le PDF en HTML?

  • iFrame?
  • Objet?
  • Incorporer?

Que dit Adobe à ce propos?

Dans mon cas, le fichier PDF est généré à la volée, il ne peut donc pas être téléchargé vers une solution tierce avant d'être vidé.


981
2017-11-14 23:55


origine


Réponses:


Probablement la meilleure approche consiste à utiliser le PDF.JS bibliothèque. C'est un pur HTML5/JavaScript rendu pour les documents PDF sans plugins tiers.

Démonstration en ligne: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js


449
2017-11-15 00:01



C'est rapide, facile, précis et ne nécessite aucun script tiers:

<embed src="http://example.com/the.pdf" width="500" height="375" type='application/pdf'>

MISE À JOUR (1/2018):

Le navigateur Chrome sur Android ne prend plus en charge les intégrations PDF. Vous pouvez contourner cela en utilisant la visionneuse PDF Google Drive

<embed src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

404
2017-08-12 17:29



Vous pouvez également utiliser Google PDF Viewer à cette fin. Pour autant que je sache, ce n'est pas une fonctionnalité officielle de Google (ai-je tort sur ce point?), Mais cela fonctionne très bien pour moi. Vous devez télécharger votre PDF quelque part auparavant et utiliser son URL:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Ce qui est important, c'est qu'il n'a pas besoin d'un lecteur Flash, il utilise JavaScript.


326
2018-03-10 13:38



Vous avez un certain contrôle sur la façon dont le PDF apparaît dans le navigateur en passant certaines options dans la chaîne de requête. J'étais heureux de ce travail, jusqu'à ce que je me rende compte que cela ne fonctionne pas dans IE8. :(

Il fonctionne dans Chrome 9 et Firefox 3.6, mais dans IE8, il affiche le message "Insérer votre message d'erreur ici, si le fichier PDF ne peut pas être affiché."

Cependant, je n'ai pas encore testé les anciennes versions de l'un des navigateurs ci-dessus. Mais voici le code que j'ai de toute façon au cas où cela aiderait quelqu'un. Cela définit le zoom à 85%, supprime les barres de défilement, les barres d'outils et les volets de nav. Je mettrai à jour mon post si je trouve quelque chose qui fonctionne dans IE aussi.

<div id="pdf">
  <object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
  </object>
</div>

82
2018-03-02 18:36



En utilisant les deux <object> et <embed> vous donnera une plus grande largeur de compatibilité de navigateur.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

45
2018-05-15 14:36



Convertissez-le en PNG via ImageMagick, et affichez le PNG (rapide et sale).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

C'est une bonne option si vous avez besoin d'une solution rapide, si vous voulez éviter les problèmes d'affichage de PDF par navigateur, et si le PDF n'est qu'une page ou deux. Bien sûr, vous devez installer ImageMagick (qui à son tour a besoin de Ghostscript) sur votre serveur Web, une option qui peut ne pas être disponible dans les environnements d'hébergement partagés. Il y a aussi un plugin PHP (appelé imagick) qui fonctionne comme ça mais il a ses propres exigences spéciales.


19
2017-12-06 18:17



Jetez un oeil à ce code - Pour intégrer le PDF en HTML

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

13
2017-11-15 23:11