Méthode recommandée pour incorporer un PDF en HTML?

Quelle est la méthode recommandée pour intégrer un fichier PDF au format HTML?

• iFrame?
• Objet?
• Intégrer?

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é vers une solution tierce avant de le vider.

La meilleure approche est probablement d'utiliser la bibliothèque PDF.JS. C'est un rendu HTML5 / JavaScript pur pour les documents PDF sans plugins tiers.

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

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

C'est rapide, facile, au point 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 ce problème en utilisant la visionneuse 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 la visionneuse Google PDF à cette fin. Pour autant que je sache, ce n'est pas une fonctionnalité officielle de Google (je me trompe?), Mais cela fonctionne pour moi très bien et en douceur. Vous devez télécharger votre PDF quelque part avant et utilisez 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.

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 réalise qu'il ne fonctionne pas dans IE8. :(

Il 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é."

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 règle 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 tombe sur 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>

L'utilisation des deux <object>et <embed>vous donnera une plus grande étendue de compatibilité avec les navigateurs.

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

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 PDF entre navigateurs et si le PDF n'est qu'une ou deux pages. Bien sûr, vous devez installer ImageMagick (qui à son tour a besoin de Ghostscript) sur votre serveur Web, une option qui pourrait ne pas être disponible dans les environnements d'hébergement partagé. Il existe également un plugin PHP (appelé imagick) qui fonctionne comme ceci, mais il a ses propres exigences particulières.

Jetez un œil à 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 est lui-même basé sur xpdf ) avec une visionneuse SWF afin que vous puissiez 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, Ghostview a la possibilité de convertir des documents PDF dans d'autres formats pour lesquels vous pourrez peut-être plus facilement créer une visionneuse Flash.

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

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, cela a été trop lent pour notre PDF. IE / Edge ne fonctionnait pas du tout.

Nous l'avons donc essayé avec une chaîne Base64 dans une balise d'objet HTML. Cela n'a pas fonctionné à nouveau pour IE / Edge (peut-être le même problème qu'avec PDF.js). Dans Chrome / Firefox / Safari à nouveau, aucun problème. C'est pourquoi nous avons choisi une solution hybride. IE / Edge nous utilisons un IFrame et pour tous les autres navigateurs l'objet-tag.

La solution IFrame fonctionnerait bien sûr également pour Chrome et co. La raison pour laquelle nous n'avons pas utilisé cette solution pour Chrome est que, bien que le PDF s'affiche correctement, Chrome fait une nouvelle demande au serveur dès que vous cliquez sur "télécharger" dans l'aperçu . Le champ PDFHelperTransferData requis (pour envoyer nos données de formulaire nécessaires à la génération du PDF) n'est plus défini car le PDF est affiché dans un IFrame. Pour cette fonctionnalité / bogue, voirChrome envoie deux demandes lors du téléchargement d'un PDF (et annule l'une d'entre elles) .

Maintenant, les enfants problématiques IE9 et IE10 restent. Pour ceux-ci, nous avons renoncé à une solution d'aperçu et envoyons simplement le document en cliquant sur le bouton d'aperçu sous forme de téléchargement à l'utilisateur (au lieu de l'aperçu). Nous avons beaucoup essayé, mais même si nous avions trouvé une solution, l'effort supplémentaire pour cette petite partie des utilisateurs n'en aurait pas valu la peine. Vous pouvez trouver notre solution de téléchargement ici: Téléchargez le PDF sans rafraîchissement 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 puis-je détecter Internet Explorer (IE) et Microsoft Edge à l'aide de JavaScript? J'espère que ces résultats feront gagner du temps à quelqu'un d'autre.

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>

1. Créez un conteneur pour contenir votre PDF

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

2. Indiquez à PDFObject quel PDF incorporer et où l'incorporer

   <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, la bordure, les marges, etc.

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

source: https://pdfobject.com/

Scribd ne vous demande plus d'héberger vos documents sur leur serveur. Si vous créez un compte avec eux, vous obtenez un identifiant d'éditeur. 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 .

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

PdfToImageServlet à l' aide de la convertcommande ImageMagick .

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

Voici comment je l'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)
        })

ajoutez urlPDF dynamiquement au HTML:

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

Une des options que vous devriez considérer est le PDF remarquable.
Il a un plan gratuit, sauf si vous prévoyez de faire une collaboration en ligne en temps réel sur des fichiers PDF.

Intégrez ce qui suit iframeà n'importe quel html et profitez des résultats:

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

Pour diffuser le fichier dans le navigateur, consultez la question Stack Overflow Comment diffuser un fichier PDF en tant que binaire dans le navigateur à l'aide de .NET 2.0 - notez que, avec des variations mineures, cela devrait fonctionner que vous serviez un fichier à partir du système de fichiers ou généré dynamiquement.

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

En utilisant cette approche, un iframe est probablement la meilleure façon de procéder. Avoir un formulaire Web qui diffuse le fichier, puis placez l'iframe sur une autre page avec son srcattribut défini sur le premier formulaire.

1. Construire un blob des octets PDF d'entrée
2. Utilisez un iframe et PDF.js corrigés avec cette solution de contournement de 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 dans l'iframe passé via l'URI de blob standard dans l'URL.

J'ai dû prévisualiser un PDF avec React, donc après avoir essayé plusieurs bibliothèques, ma solution optimale était de récupérer les données et de les envoyer par ebmed.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

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

utilisez simplement iFrame pour les PDF.

J'avais des besoins spécifiques dans mon application React.js, j'ai essayé des millions de solutions mais je me suis retrouvé avec un iFrame :) Bonne chance!

J'ai trouvé que cela fonctionne très bien et que le navigateur le gère dans Firefox. Je n'ai pas vérifié IE ...

<script>window.location='url'</script>