web-dev-qa-db-fra.com

Méthode recommandée pour intégrer PDF en HTML?

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

  • iFrame?
  • Objet?
  • Intégrer?

Qu'est-ce que Adobe se dit à ce sujet?

Dans mon cas, le PDF est généré à la volée. Il est donc impossible de le télécharger vers une solution tierce avant de le vider.

htmlpdf
1103
Daniel Silveira

La meilleure approche consiste probablement à utiliser la bibliothèque PDF.JS . C'est un pur HTML5 / JavaScript rendu pour PDF documents sans plug-in tiers.

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

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

514
lubos hasko

Ceci est rapide, facile, pertinent et ne nécessite aucun script tiers:

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

PDATE (1/2018):

Le navigateur Chrome sous Android ne prend plus en charge l'intégration de PDF. Vous pouvez contourner ce problème en utilisant le lecteur Google Drive PDF

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

Vous pouvez également utiliser Google PDF Viewer à cette fin. Autant que je sache, ce n'est pas une fonctionnalité officielle de Google (je me trompe?), Mais cela fonctionne très bien pour moi. Vous devez télécharger votre PDF quelque part avant et utiliser simplement 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.

348
Lukasz Korzybski

Vous avez un certain contrôle sur la manière dont le PDF apparaît dans le navigateur en transmettant des 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. :(

Cela 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 cependant pas encore testé les anciennes versions des navigateurs ci-dessus. Mais voici le code que j'ai de toute façon au cas où cela pourrait aider quelqu'un. Ceci définit le zoom à 85%, supprime les barres de défilement, les barres d’outils et les volets de navigation. Je mettrai à jour mon message si je découvre quelque chose qui fonctionne également 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>
103
Gayle

Utiliser à la fois <object> et <embed> vous donnera une plus grande 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>
57
Suneel Kumar

Convertissez-le au format PNG via ImageMagick et affichez-le au format 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 souhaitez éviter les problèmes d'affichage entre plusieurs navigateurs PDF, et si le PDF ne représente qu'une page ou deux. Bien entendu, vous devez installer ImageMagick (qui à son tour a besoin de Ghostscript) sur votre serveur Web, option qui pourrait ne pas être disponible dans les environnements d'hébergement partagé. Il y a aussi un plugin PHP (appelé imagick) qui fonctionne comme ceci mais il a ses propres exigences.

20
Dan Mantyla

Cherchez 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>
16
amIT

FDView combine PDF2SWF (qui est lui-même basé sur xpdf ) avec un SWF afin que vous puissiez convertir et Intégrez PDF documents à 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 les documents PDF en d'autres formats pour lesquels vous pourrez peut-être créer plus facilement un visualiseur Flash.

Mais pour les simples PDF documents, FDView devrait fonctionner assez bien.

12
Adam Davis

Notre problème est que, pour des raisons juridiques , nous ne sommes pas autorisés à stocker temporairement un PDF sur le disque dur . De plus, la page entière ne doit pas être rechargée lors de l'affichage d'un PDF en tant qu'aperçu dans le navigateur.

Nous avons d'abord essayé PDF.jS. Cela a fonctionné avec Base64 dans la visionneuse pour Firefox et Chrome. Cependant, notre PDF était trop lent. IE/Edge ne fonctionnait pas du tout.

Nous l'avons donc essayé avec une chaîne Base64 dans une balise d'objet HTML. Encore une fois, cela ne fonctionnait pas pour IE/Edge (peut-être le même problème que pour PDF.js). Dans Chrome/Firefox/Safari encore une fois pas de problème. C'est pourquoi nous avons choisi une solution hybride. IE/Edge, nous utilisons un IFrame et, pour tous les autres navigateurs, la balise-objet.

La solution IFrame fonctionnerait bien sûr également pour Chrome and co. La raison pour laquelle nous n’avons pas utilisé cette solution pour Chrome est que, bien que le PDF s’affiche correctement, , Chrome envoie dès que possible une nouvelle demande au serveur. lorsque vous cliquez sur "télécharger" dans l’aperçu . Le champ masqué requis pdfHelperTransferData (pour l'envoi des données de formulaire nécessaires à la génération PDF) n'est plus défini car le fichier PDF est affiché. dans un IFrame. Pour cette fonctionnalité/ce bug, voir Chrome envoie deux demandes lors du téléchargement d'un PDF (et en annule une) .

Maintenant, les enfants à problèmes IE9 et IE10 restent. Pour ceux-ci, nous avons abandonné une solution de prévisualisation et simplement envoyé le document en cliquant sur le bouton de prévisualisation sous forme de téléchargement à l'utilisateur (au lieu de la prévisualisation). Nous avons beaucoup essayé, mais même si nous avions trouvé une solution, l’effort supplémentaire pour cette infime partie des utilisateurs n’aurait pas valu la peine. Vous pouvez trouver notre solution pour le téléchargement ici: Télécharger PDF sans actualisation avec IFrame .

Notre Javascript:

var transferData = getFormAsJson()
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 le type de navigateur pour IE/Edge, voir ici: Comment détecter Internet Explorer (IE) et Microsoft Edge à l'aide de JavaScript? J'espère que ces résultats permettront à quelqu'un de gagner du temps.

9
George Maharis

Scribd ne vous oblige plus à héberger vos documents sur leur serveur. Si vous créez un compte avec eux, vous obtenez un identifiant d'éditeur. Il ne faut que quelques lignes de code JavaScript pour charger les fichiers PDF stockés sur votre propre serveur.

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

7
Bjorn

  1. Créez un conteneur pour contenir votre PDF

    <div id="example1"></div>

  2. Indiquer à PDFObject lequel PDF incorporer et où l'intégrer

    <script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

  3. Vous pouvez éventuellement utiliser CSS pour spécifier le style visuel, y compris les dimensions, les bordures, les marges, etc.

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

source: https://pdfobject.com/

7
Said Bouigherdaine

Vous pouvez utiliser l'emplacement relatif du pdf enregistré comme ceci:

Exemple 1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Exemple2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

3
Ahmedakhtar11

Une des options à considérer est PDF notable
Il a un plan gratuit, sauf si vous envisagez de faire de la collaboration en ligne en temps réel sur des fichiers PDF.

Intégrez le iframe suivant à un code HTML et profitez du résultat:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
3
Georgios Pligoropoulos

PdfToImageServlet en utilisant la commande convert d'ImageMagick.

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

3
PLA
<object width="400" height="400" data="helloworld.pdf"></object>
3
Daryl H

Pour diffuser le fichier dans le navigateur, voir Question relative au dépassement de capacité Comment diffuser un fichier PDF sous forme binaire pour le navigateur à l'aide de .NET 2. - Notez que, avec des variations mineures, cela devrait fonctionner si vous fournissez un fichier à partir du système de fichiers ou généré dynamiquement.

Cela dit, l'article MSDN référencé adopte une vision plutôt simpliste du monde. Vous pouvez donc lire Transférer avec succès un PDF vers un navigateur via HTTPS également pour certains en-têtes que vous devrez peut-être fournir.

En utilisant cette approche, un iframe est probablement la meilleure voie à suivre. Utilisez un formulaire Web pour diffuser le fichier, puis placez l'iframe sur une autre page avec son attribut src défini sur le premier formulaire.

2
GalacticCowboy
  1. Construire un blob de l'entrée PDF octets
  2. Utilisez un iframe et PDF.js patché avec this Solution de contournement du navigateur

L'URI de l'iframe devrait ressembler à ceci:

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

Maintenant, FF, Chrome, IE 11 et Edge affichent tous le PDF dans une visionneuse de l'iframe transmise via l'URI blob standard dans l'URL.

1
fartwhif

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 dynamiquement urlPDF au HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>
1
Despertaweb

Si vous ne souhaitez pas héberger PDF.JS par vous-même, vous pouvez essayer DocDroid . Il est similaire au visualiseur Google Drive PDF, mais permet une personnalisation de la marque.

0
monday