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

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

  • iFrame?
  • Objet?
  • Intégrer?

Que dit Adobe à ce sujet?

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

La meilleure approche consiste probablement à utiliser la bibliothèque PDF.JS. C’est un moteur de rendu HTML5 / JavaScript pur pour les documents PDF sans plug-ins 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, et ne nécessite aucun script tiers:

  

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 le lecteur de PDF Google Drive

  

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?), Mais cela fonctionne très bien pour moi. Vous devez télécharger votre PDF quelque part avant et simplement utiliser son URL:

  

Ce qui est important, c’est qu’il ne nécessite pas de lecteur Flash, il utilise JavaScript.

Vous avez un certain contrôle sur la façon dont le PDF apparaît dans le navigateur en transmettant certaines options dans la chaîne de requête. J’étais content de ce travail, jusqu’à ce que je réalise qu’il 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 pas encore testé les anciennes versions des navigateurs ci-dessus. Mais voici le code que j’ai en tout cas au cas où cela aiderait quelqu’un. Cela définit le zoom sur 85%, supprime les barres de défilement, les barres d’outils et les panneaux de navigation. Je mettrai à jour mon message si je rencontre quelque chose qui fonctionne aussi dans IE.

  

Insert your error message here, if the PDF cannot be displayed.

Utiliser à la fois et vous donnera une plus grande étendue de compatibilité avec les navigateurs.

   

This browser does not support PDFs. Please download the PDF to view it: Download PDF.

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

 '; ?> 

C’est une bonne option si vous avez besoin d’une solution rapide, si vous souhaitez éviter les problèmes de visualisation 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 y a aussi un plugin PHP (appelé imagick) qui fonctionne comme ça mais il a ses propres exigences.

Recherchez ce code – Pour intégrer le PDF en HTML

   shree  

FDView combine PDF2SWF (qui est lui-même basé sur xpdf ) avec un visualiseur SWF pour que vous puissiez convertir et incorporer 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 capacité de convertir des documents PDF dans d’autres formats, ce qui vous permettra de créer plus facilement un visualiseur Flash.

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

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 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 contenir votre PDF

     
  2. Dites à PDFObject quel PDF intégrer et où l’incorporer

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

      

source: https://pdfobject.com/

  

Une des options à prendre en compte est le PDF notable.
Il a un plan gratuit à moins que vous ne planifiiez une collaboration en ligne en temps réel sur les fichiers PDF.

Intégrez l’ iframe suivant à n’importe quel fichier HTML et profitez des résultats:

  

Le problème pour nous est que nous ne pouvons pas enregistrer de données pour des raisons juridiques. Nous devons donc travailler avec des stream et similaires sans enregistrer le PDF dans le système de fichiers. Et pour plusieurs raisons, la page ne doit pas être rechargée lors du téléchargement ou de l’affichage d’un fichier PDF.

Nous avons d’abord essayé avec PDF.JS à cause de la suggestion de @lubos hasko: nous avons réussi à utiliser Base64 avec le visualiseur. Cela a fonctionné dans Firefox et Chrome. Mais c’était quand même très lentement. IE / Edge ne fonctionnait pas du tout pour nous.

L’affichage d’une chaîne PDF-Base64 dans une balise object n’a pas fonctionné pour nous dans le navigateur Microsoft (IE / Edge) mais très bien dans Chrome / Firefox / Safari. Pour IE11 / Edge, nous avons donc utilisé un IFrame pour afficher un stream PDF. Cela fonctionne bien et l’effort de maintenance est maintenu dans les limites. Pour IE9 / IE10, nous envoyons simplement le fichier en tant que stream de téléchargement car il ne fonctionnait pas très bien avec ces navigateurs en combinaison avec l’iframe. L’utilisateur n’a pas le luxe de montrer le pdf dans un aperçu modal-box qui convient à la quantité de nos clients qui utilisent ces navigateurs (environ 1%). Vous pouvez trouver notre solution de téléchargement ici: Téléchargez le PDF sans actualisation 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 effectue une autre requête sur le serveur dès que vous souhaitez télécharger le PDF dans Google Chrome. Lecteur PDF. Le champ caché pdfHelperTransferData n’est plus défini, car le PDF est affiché dans un IFrame. Le paramètre de la fonction côté serveur est donc nul . Pour cette “fonctionnalité / bogue”, 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: "serverSideFunctonWhichResortingvesPdfAsBase64", type: "post", data: { downloadHelperTransferData: transferData }, success: function (result) { $("#object-pdf-shower").attr("data", result); } }) } 

Notre HTML

   

Pour vérifier le navigateur Microsoft, voir Instance: Comment détecter Internet Explorer (IE) et Microsoft Edge en utilisant JavaScript? J’espère que ces découvertes sauveront quelqu’un d’autre du temps.

PdfToImageServlet utilisant la commande de convert d’ImageMagick.

Exemple d’utilisation:

Pour diffuser le fichier sur le navigateur, reportez-vous à la section Question sur le débordement de la stack. Comment diffuser un fichier PDF en tant que fichier binary sur le navigateur à l’aide de .NET 2.0 – notez que si vous déposez un fichier du système de fichiers ou généré dynamicment.

Cela étant dit, l’article MSDN référencé présente une vue plutôt simpliste du monde, vous pouvez donc vouloir lire en streaming un fichier PDF dans un navigateur via HTTPS pour certains des en-têtes que vous devrez peut-être fournir.

En utilisant cette approche, un iframe est probablement la meilleure solution. Avoir un formulaire Web qui diffuse le fichier, puis placer l’iframe sur une autre page avec son atsortingbut src défini sur le premier formulaire.

  1. Construire un blob des octets PDF d’entrée
  2. Utilisez un iframe et un fichier 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 

Désormais, FF, Chrome, IE 11 et Edge affichent tous le PDF dans un visualiseur dans l’iframe transmis via l’URI standard de blob dans l’URL.

Si vous pouvez convertir votre pdf en une 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 d’image.

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

C’est comme 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 dynamicment à HTML:

  

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