10
votes

Comment intégrer un fichier PDF sur un site Web?

Je veux simplement intégrer un fichier PDF sur un site Web.

La meilleure solution que j'ai trouvée est Google Docs Viewer ( http://docs.google.com/Viewer < / a>), mais cela ne fonctionne pas pour IE et évidemment, cela ne va pas fonctionner pour moi.

Quelqu'un a une solution propre et facile à cela?

Mise à jour: je devrais ajouter que l'un des avantages de l'intégration du fichier PDF Le Way Google Viewer est que, comme le lien du fichier PDF que je lie pour se mettre à jour (et cela pourrait sans préavis), mon site tiendrait automatiquement la Même fichier PDF (à condition que le chemin complet ne change pas, ce qu'il ne le fait pas). Pour cette raison, la conversion du fichier en une image n'est pas préférée.

html pdf embed

3 commentaires

@Ionut - Je suis content de ne être pas l'un de vos clients. J'espère que tu plaisantais.

@Ionut, ha, je vous entends, mais c'est un site Web optimisé pour le référencement et je n'ai donc pas le pouvoir de choisir le type de navigateur qu'ils utilisent. À l'heure actuelle, il s'agit d'environ 60% d'utilisateurs avec IE, c'est-à-dire un morceau aussi important.

@Byron: Oui, je plaisante. Cependant, g.docs spectateur Il semble fonctionner même sur IE6 :)

8 Réponses :

4
votes

Combien de temps dure le fichier PDF? Impossible de le convertir en une très longue image et d'afficher cela dans un div avec une barre de défilement?

4 commentaires

Ce n'est que quelques pages. Y a-t-il un moyen facile de convertir en une image?

@JWM: Photoshop peut les convertir.

C'est en fait une très bonne idée. C'est complètement indépendant de la plate-forme (mais bien sûr, toutes les possibilités de recherche et de sélection de texte, etc. sont partis)

Je ne me soucie pas tellement de recherches, de sélectionner du texte ... Je peux y aller avec cela.

9
votes

Eh bien que vous ne vouliez évidemment pas forcer quelqu'un à télécharger le plugin PDF insécurisé Ballonné, pourquoi ne pas les laisser utiliser le lecteur flash non sécurisé gonflé?

http://flexpaper.devaldi.com/

mais vraiment c'est juste un simple comme

</ code> </ p> </ P> </div> <hr>  <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Je veux que ce soit au moins un peu optimisé pour les navigateurs mobiles, je ne veux donc pas aliéner mes utilisateurs d'iPhone ou certains utilisateurs Android. Nice option cependant - c'est intéressant. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 5<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Si vous collez avec l'option PDF intégrée, Byron est juste bien que les fichiers PDF intégrés ne semblent pas si grands sur une page Web. Quoi qu'il en soit, assurez-vous d'être strict sur le codage. Par conséquent: <pré> xxx </ pré> <p> doit être </ p> <pré> xxx </ pré> <p> petite altération. </ p> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Je viens de FTP Mine, je n'utilise pas Google ou d'autres S / W </ P> <p> Vous devez avoir besoin d'un besoin autre qu'un fichier PDF assis dans un répertoire, qu'est-ce que c'est? </ p> <p> Aussi, pourquoi convertiriez-vous l'image (et de réduire la résolution et la clarté du PDF)? </ P> <H2> Réponse aux commentaires </ h2> <p> C'est la chose la plus laide que j'ai vue depuis mon dernier voyage en Afrique. Vous ne pensez pas sérieusement à afficher autant d'informations sur une seule page, êtes-vous. Personne ne peut le lire, et j'ai essayé chaque grossissement. </ P> <p> Pour cette quantité d'informations, vous devez adopter une approche architecturale. </ p> <ol> <li> <p> Mettez quelques contrôles sur la page d'accueil et nourrir l'utilisateur une petite quantité d'informations gérable sur la zone qu'ils ont choisi. Seul. </ p> <p> Obtenez les informations du site Web / base de données source et de l'alimenter dans votre site Web / base de données. Seulement doit changer lorsque les données source changent. L'ensemble de la liaison peut être automatisé. </ P> <p> Ensuite, vous venez de créer de belles pages propres, avec une quantité d'informations raisonnable, sous une forme lisible, sur chaque page. </ P> </ li> <li> <p> C'est un <a href="http://www.cityrail.info/index.htm ;jsessionid=e7ce27b4545B11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB11C00BFE68947AB1G1167C.NODE02#LUGINGPOINT" REM="nofollow"> <Strong> Horaire du XXe siècle </ fort> </a>. Note, pas un calendrier du 21ème siècle (regarde Berlin ou München pour l'un de ceux-ci). Vous ne pouvez vraiment pas simplement numériser un document intense et lui fournir comme un PDF intégré. </ P> <ul> <li> Notez que vous n'avez pas besoin des contrôles élaborés de CityRail. Vous pouvez avoir juste quelques-uns pour permettre la sélection de la ligne et du calendrier. </ Li> <li> Produit ensuite une page qui constitue une forme simple de la page CityRail. </ Li> <LI> ou (le minimum absolu) une PDF entièrement visible et pleine de taille par page Web. <br> . </ li> </ ul> </ li> <li> <p> J'aime ce <a href="http://www.softwaregems.com.au/documents/documentary%20examples/order%20dm%20Advanced.pdf" Rel="nofollow"> <Strong> simple visible PDF </ strong> </a>. Cet exemple pourrait être servi dans un PDF pour la page 1 et 4 pages PDF distinctes pour le reste; Les PDF ont déjà une navigation de base. J'ai donc utilisé cette fonctionnalité et produit un 5-pager à la place. Assurez-vous de trouver et d'utiliser les boutons de verre bleu et suivez les indications de navigation sur le haut de gauche et le bas de chaque page. </ P> </ li> <li> <p> seconde pour démontrer les PDF et la navigation, consultez le dossier: Les fichiers sont tous des PDF. </ P> </ LI> <li> <p> retour à la question initiale. Maintenant, vous <strong> peut </ strong> intégrer les PDF, mais si vous le faites, veuillez ne pas gâcher avec eux. Toutes les commandes que vous avez sur la page liée sont redondantes; Tout navigateur facilite le fait que, même maintenant, et le fera si mieux à l'avenir. Par exemple. Dans <em> PDF visible simple </ em>, utilisez les commandes de votre navigateur pour augmenter / diminuer le grossissement, déplacer autour du document, etc. </ p> </ li> <LI> <p> Supposons que vous terminiez votre page Google Maps, c'est la première page ou la page d'index. Dessinez toutes les lignes de train dans; Lorsque l'utilisateur clique sur une ligne de train, il les prend à (a) une page propre produite à partir de votre DB selon la (1) qui ressemblera à (2), ou (B) un seul PDF propre à la forme lisible. (3). Vous pouvez faire tout le projet simplement en manipulant des fichiers dans des annuaires. </ P> </ li> </ ol> <p> un <fort> lot </ fort> moins de travail. Pas de documents Google; pas d'intermédiaire S / W pour vous contracter ou travailler. Vous pouvez oublier IE et <EM> ses </ em> Incarnations et Strangulations multiples; tout autre navigateur et <em> ses limitations </ em>. Concentrez-vous sur les données et y remédez à la forme présentable, pas sur le S / W pitoyable et ses convulsions. </ P> <p> acclamations </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Ok, bonne question. L'URL pour un exemple de page de ce que je veux créer est ici: <a href="http://www.thechicagometratrarain.com/bnsf-schedule-v2.php" rel="nofollow Noreferrer"> ThechicagometrAn.com /bnsf-schedule-v2.php </a> </p> <hr> <p class="answer-comment"> @Jwm. Répondu dans ma réponse. S'il vous plaît demander d'autres questions clarifiantes. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 5<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Réponse mise à jour pour HTML5: <pre><object data="filename.pdf" type="application/pdf"> Your browser does not support pdfs, <a href="filename.pdf">click here to download the file.</a> </object> </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Ne semble pas être pris en charge sur mobile. Je viens d'obtenir une erreur manquante du plugin sur chrome et Firefox sur Android. </p> <hr> <p class="answer-comment"> Vous avez droit <code> incorporé </ code> est obsolète, mis à jour ma réponse pour être plus à jour. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 2<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> La meilleure approche est probablement d'utiliser la bibliothèque PDF.JS. C'est un rendu pure HTML5 / JavaScript pour les documents PDF sans plug-ins tiers. <p> Démo en ligne: <a href="http://mozilla.github.com/pdf.js/web/viewer.html" rel. noreferrer> http://mozilla.github.com/pdf.js/web/viewer.html </a> p> </p><p> github: <a href="https://github.com/%20Mozilla%20/%20pdf.js%20" rel=" nOfollow noreferrer "> https://github.com/mozilla/pdf.js </a> <a href="https://stackoverflow.com/questions/291813/Recommounde-way-a-embed-pdf-in-html"> Entrez la description du lien ici </a> P> </p><p> Vous pouvez également Utilisez Google PDF Viewer à cette fin. Autant que je sache que ce n'est pas une fonctionnalité Google officielle (je me trompe?), Mais ça marche pour moi très bien et doucement. Vous devez télécharger votre PDF quelque part avant et simplement utiliser son URL: P> </p><pre><iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe> </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> à partir de HTML5: <pre><embed src="url" type="media-type" height="" width=""/> </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> <strong> Google Docs propose une fonctionnalité non documentée qui vous permet d'intégrer des fichiers PDF et des présentations PowerPoint dans une page Web. Les fichiers ne doivent pas nécessairement être téléchargés sur Google Docs, mais ils doivent être disponibles en ligne. </ Strong> </ p> <p> Voici le code que j'ai utilisé pour intégrer le fichier PDF: </ p> <p> <em> </ em> </ p> <p> Mais vous devez remplacer l'URL audacieuse avec votre propre adresse. Comme je l'ai mentionné, le visualiseur de documents fonctionne pour les fichiers PDF et PPT. </ P> <p> <a href="http://googlesystem.blogspot.com/2009/09/eMeddable-Google-Document-Viewer.html" Rel="nofollow"> http://googlesystem.blogspot.com/2009/ 09 / embeddable-Google-Document-Viewer.html </a> </ P> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0">

Articles qui pourrait vous intéresser :


                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO                        
                        
                                            
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        
                        
                                            
                            Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?                        
                        
                                            
                            Comment puis-je définir un format pour les nombres d'entrée dans Blazor