Comment intégrer PDF en HTML?

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

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.

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>

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>

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.

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>

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.

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 .

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 /

<object width="400" height="400" data="helloworld.pdf"></object>

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>

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.

PdfToImageServlet utilisant la commande convert D'ImageMagick.

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

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

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.

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>

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.

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>