Comment intégrer PDF en HTML?

Quelle est la façon recommandée d'intégrer le format PDF au format HTML?

  • iFrame?
  • de l'Objet?
  • Embed?

Qu'en dit Adobe?

dans mon cas, le PDF est généré à la volée, il ne peut donc pas être téléchargé dans une solution tierce avant de le purger.

1005
demandé sur halfer 2008-11-15 02:55:13
la source

20 ответов

probablement la meilleure approche est d'utiliser le PDF.Js bibliothèque. C'est un pur HTML5 / JavaScript renderer pour les documents PDF sans aucun plugin tiers.

démo en ligne: http://mozilla.github.com/pdf.js/web/viewer.html

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

461
répondu lubos hasko 2012-06-10 16:57:50
la source

C'est rapide, facile, 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 supporte plus PDF embeds. Vous pouvez contourner cela en utilisant le lecteur PDF de Google Drive

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
422
répondu Batfan 2018-08-24 14:16:54
la source

vous pouvez également utiliser Google PDF viewer à cette fin. Pour autant que je sache, ce N'est pas une fonctionnalité officielle de Google (est-ce que je me trompe là-dessus?), mais cela fonctionne pour moi très bien et en douceur. Vous devez télécharger votre PDF quelque part avant et il suffit d'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 est qu'il n'a pas besoin D'un lecteur Flash, il utilise JavaScript.

329
répondu Lukasz Korzybski 2012-03-22 04:03:45
la source

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

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

je n'ai pas encore testé les versions plus anciennes de ces navigateurs, cependant. Mais voici le code que j'ai quand même dans le cas où il peut aider n'importe qui. Cela permet de régler le zoom à 85%, de supprimer les barres de défilement, les barres d'outils et les panneaux nav. Je vais mettre à jour mon post si je dois trouver quelque chose qui fonctionne dans IE.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
88
répondu Gayle 2018-08-17 10:59:53
la source

en utilisant à la fois <object> et <embed> vous donnera une plus grande étendue 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
répondu Suneel Kumar 2017-08-08 13:55:17
la source

le convertir en PNG via ImageMagick, et afficher 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 de visualisation de PDF entre navigateurs, et si le PDF est seulement une page ou deux. Bien sûr, vous devez installer ImageMagick (qui à son tour nécessite Ghostscript) sur votre serveur web, une option qui pourrait ne pas être disponible dans les environnements d'hébergement partagés. Il y a aussi un plugin PHP (appelé imagick) qui fonctionne comme ceci mais il a ses propres exigences spéciales.

20
répondu Dan Mantyla 2014-07-11 16:09:06
la source

chercher 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
répondu amIT 2015-08-05 21:21:37
la source

fdview combine PDF2SWF (qui lui-même est basé sur xpdf ) avec un SWF viewer de sorte que vous pouvez convertir et intégrer des documents PDF à la volée sur votre serveur.

xpdf n'est pas un convertisseur PDF parfait. Si vous avez besoin de meilleurs résultats, alors Ghostview a une certaine capacité à convertir des documents PDF dans d'autres formats que vous pourriez être en mesure de plus facilement construisez un visualiseur Flash pour.

mais pour les documents PDF simples, FDView devrait fonctionner raisonnablement bien.

12
répondu Adam Davis 2012-06-10 17:04:10
la source

Scribd n'exige plus que vous hébergiez vos documents sur leur serveur. Si vous créez un compte avec eux de sorte que vous obtenez un éditeur ID. Il suffit de quelques lignes de code JavaScript pour charger des fichiers PDF stockés sur votre propre serveur.

Pour plus de détails, voir Outils de développement .

7
répondu Bjorn 2012-06-10 17:15:49
la source
  1. créer un conteneur pour tenir votre PDF

    <div id="example1"></div>
    
  2. Dites PDFObject PDF intégrer, et où l'enracinement de la

    <script src="/js/pdfobject.js"></script>
    <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
    
  3. vous pouvez optionnellement utiliser CSS pour spécifier le style visuel, y compris les dimensions, bordure, marges, etc.

    <style>
    .pdfobject-container { height: 500px;}
    .pdfobject { border: 1px solid #666; }
    </style>
    

source: https://pdfobject.com /

5
répondu Said Bouigherdaine 2016-08-19 04:26:03
la source
<object width="400" height="400" data="helloworld.pdf"></object>
4
répondu Daryl H 2016-02-03 17:36:59
la source

une des options que vous devriez considérer est PDF Notable

Il a un plan gratuit sauf si vous prévoyez de faire une collaboration en ligne en temps réel sur pdfs

incorpore le suivant iframe à n'importe quel html et apprécie les résultats:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
3
répondu Georgios Pligoropoulos 2015-05-20 02:32:26
la source

le problème pour nous est, nous ne pouvons pas enregistrer des données pour des raisons légales. Nous devons donc travailler avec des flux et similaires sans sauvegarder le PDF dans le système de fichiers. Et pour plusieurs raisons, la page ne doit pas se recharger lors du téléchargement ou de l'affichage d'un fichier PDF.

D'abord nous avons essayé avec PDF.JS à cause de la suggestion de @lubos hasko: nous avons réussi à utiliser la Base64 avec le spectateur. Cela a fonctionné dans Firefox et Chrome. Mais il était de toute façon très lentement. IE / Edge n'a pas fonctionné du tout pour nous.

l'affichage D'une chaîne de caractères PDF-Base64 dans une étiquette objet ne fonctionnait pas pour nous dans Microsoft browser (IE/Edge) mais très bien dans Chrome/Firefox/Safari. Pour IE11 / Edge, nous avons donc utilisé une IFrame pour afficher un flux PDF. Il fonctionne bien et l'effort de maintenance est maintenu dans les limites. Pour IE9 / IE10, nous envoyons simplement le fichier sous forme de flux de téléchargement parce qu'il ne fonctionne pas très bien avec ces navigateurs en combinaison avec l'iframe. L'Utilisateur n'a pas le luxe de montrer le pdf un modal-box-preview qui est ok pour le nombre de nos clients qui utilisent ces navigateurs (environ 1%). Vous pouvez trouver notre solution de téléchargement ici: Télécharger PDF sans rafraîchir avec IFrame .

la raison pour laquelle nous n'utilisons pas la solution IFrame pour tous les navigateurs, est que bien que le PDF soit affiché correctement dans tous nos navigateurs testés, Chrome fait une autre demande à la fonction serveur dès que vous voulez télécharger le PDF dans le Chrome-PDF Lecteur. Le champ caché pdfHelperTransferData n'est plus défini car le PDF est affiché dans une IFrame, de sorte que le paramètre dans la fonction côté serveur est null . Pour cette "fonctionnalité/bug" voir ce Chrome envoie deux requêtes lors du téléchargement D'un PDF (et en annule une) .

Notre Javascript

if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

notre HTML

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

pour vérifier pour Microsoft-Browser voir par exemple: Comment puis-je détecter Internet Explorer (IE) et Microsoft Edge en utilisant JavaScript? j'espère que ces découvertes feront gagner du temps à quelqu'un d'autre.

3
répondu George Maharis 2017-10-30 18:51:56
la source

PdfToImageServlet utilisant la commande convert D'ImageMagick.

exemple D'utilisation: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

2
répondu PLA 2017-02-23 23:09:02
la source

pour streamer le fichier vers le navigateur, voir la question sur le débordement de la pile 151930920" comment streamer un fichier PDF en version binaire vers le navigateur en utilisant .NET 2.0 - notez que, avec des variations mineures, cela devrait fonctionner que vous serviez un fichier du système de fichiers ou généré dynamiquement.

cela dit, L'article MSDN référencé prend une vue assez simpliste du monde, donc vous pouvez vouloir lire Diffusez avec succès un PDF au fureteur par HTTPS ainsi que pour certains des en-têtes que vous pouvez avoir besoin de fournir.

en utilisant cette approche, une iframe est probablement la meilleure façon de procéder. Avoir un formulaire Web qui diffuse le fichier, puis mettre l'iframe sur une autre page avec son attribut src fixé à la première forme.

1
répondu GalacticCowboy 2017-05-23 15:26:36
la source
  1. construire un blob des octets PDF d'entrée
  2. utilisez un iframe et PDF.js patché avec cette croix navigateur contournement de

L'URI pour l'iframe devrait ressembler à quelque chose comme ceci:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

maintenant FF, Chrome, IE 11, et Edge tous afficher le PDF dans un téléspectateur dans l'iframe passé par le URL.

0
répondu fartwhif 2018-07-18 16:23:08
la source

si vous ne voulez pas héberger PDF.JS sur votre propre, vous pouvez essayer de DocDroid . Il est similaire au lecteur PDF de Google Drive, mais permet personnaliser la marque.

-1
répondu monday 2017-09-18 19:03:34
la source

C'est ce que j'ai fait avec AXIOS et Vue.js:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

ajouter urlPDF dynamiquement au HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>
-1
répondu Despertaweb 2018-05-17 12:26:27
la source

si vous pouvez convertir votre pdf en image, allez à https://www.base64-image.de placez votre image à l'intérieur et elle la convertira en base64 pour vous. Ensuite, placez le code dans une balise image.

-1
répondu Yehoshua Levin 2018-08-07 19:21:20
la source

j'ai trouvé cela fonctionne bien et le navigateur gère dans firefox. Je n'ai pas vérifié IE...

<script>window.location='url'</script>
-6
répondu Wynn 2017-10-13 17:10:14
la source

Autres questions sur html pdf