Welche Methode wird empfohlen, um PDF in HTML einzubetten?
Was sagt Adobe selbst dazu?
In meinem Fall wird die PDF-Datei im laufenden Betrieb generiert, so dass sie vor dem Flushen nicht in eine Drittanbieterlösung hochgeladen werden kann.
Das geht schnell, ist einfach, bringt es auf den Punkt und erfordert kein Skript eines Drittanbieters:
<embed src="http://example.com/the.pdf" width="500" height="375"
type="application/pdf">AKTUALISIERUNG (2/3/2021)
Adobe bietet jetzt eine eigene PDF Embed API an.
https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html
UPDATE (1/2018):
Der Chrome-Browser auf Android unterstützt keine PDF-Einbettungen mehr. Sie können dies umgehen, indem Sie den Google Drive PDF-Viewer verwenden
<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
Wenn Sie sicher sein wollen, dass es angezeigt wird, anstatt das pdf automatisch herunterzuladen (wie es bei mir der Fall war), fügen Sie type='application/pdf' zum Einbettungs-Tag
Besser zu verwenden <object> Tag, weil er alternative Inhalte in Browsern anzeigen kann, die keine PDFs anzeigen können. Sie können sogar ein <embed> Tag in einer <object> Tag, wenn Sie wollen. Ref: stackoverflow.com/questions/1244788/embed-vs-object
Der beste Ansatz ist wahrscheinlich die Verwendung der PDF.JS Bibliothek. Es ist eine reine HTML5 / JavaScript Renderer für PDF-Dokumente ohne Plugins von Drittanbietern.
Online-Demo: https://mozilla.github.io/pdf.js/web/viewer.html
Wie in einer anderen Antwort erwähnt, verwendet Scribd pdf2swf, um pdf-Dateien zu konvertieren
Ich empfehle dringend davon ab, scribd zu benutzen - ich habe gerade ein Experiment mit einem bestimmten Dokument durchgeführt und in Firefox 4 werden nur die ersten 3 Seiten angezeigt, während im IE9 der Text falsch wiedergegeben wird - einige Abschnitte der Seite sind versetzt. Technisch gesehen ist es also fehlerhaft. Außerdem erwarten sie, dass man ein Abonnement abschließt, um Dokumente zu drucken oder herunterzuladen! Im Grunde genommen nehmen sie zuvor kostenlose Dokumente und errichten eine Bezahlmauer um sie herum.
Die PDF.js-Bibliothek sieht tatsächlich nach einer sehr guten Lösung aus, obwohl die verlinkte Demo sie nicht in eine Seite eingebettet zeigt (sie nimmt die ganze Seite ein). Aber es verwendet HMTL5-Canvas, so sollte es einfach sein, einzubetten, und es ist schnell . Nachteilig ist, dass man für die Nutzung einige Js benötigt, im Gegensatz zu <object> : github.com/mozilla/pdf.js/blob/master/examples/helloworld/
Sie können zu diesem Zweck auch Google PDF Viewer verwenden. Soweit ich weiß, handelt es sich dabei nicht um eine offizielle Google-Funktion (oder irre ich mich da?), aber sie funktioniert bei mir sehr gut und reibungslos. Sie müssen Ihre PDF-Datei vorher irgendwo hochladen und einfach ihre URL verwenden:
<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>Wichtig ist, dass es keinen Flash-Player braucht, sondern JavaScript verwendet.
Eine Sache, die erwähnt werden sollte, ist, dass es eine Obergrenze für die Größe der PDF-Datei gibt, die angezeigt werden kann. Ich glaube, sie liegt derzeit bei 10 MB/100 Seiten. PS: Ich glaube nicht, dass der Viewer "inoffiziell" ist; es gibt sogar eine Anleitung, die die URL für die Einbettung für Sie erstellt: docs.google.com/viewer
Diese Option funktioniert hervorragend, aber Sie müssen Ihre PDFs öffentlich zugänglich machen, was für mich nicht immer eine Option ist.
@riot_starter diese Lösung funktioniert nicht mehr, wenn Sie vollständig von Google abgemeldet sind, lädt es gut, wenn Sie vollständig eingeloggt sind, lädt es gut, aber wenn Sie dazwischen sind (was auch immer das bedeutet) fragt es Sie nach Ihrem Passwort. Und im Falle des iframe wird es einfach nicht geladen.
Sie haben eine gewisse Kontrolle darüber, wie die PDF-Datei im Browser angezeigt wird, indem Sie einige Optionen in der Abfragezeichenfolge angeben. Ich war froh, dass das funktioniert, bis ich merkte, dass es im IE8 nicht funktioniert :(
Es funktioniert in Chrome 9 und Firefox 3.6, aber im IE8 erscheint die Meldung "Fügen Sie hier Ihre Fehlermeldung ein, wenn das PDF nicht angezeigt werden kann".
Ich habe allerdings noch keine älteren Versionen der oben genannten Browser getestet. Aber hier ist der Code, den ich trotzdem habe, falls er jemandem hilft. Er setzt den Zoom auf 85%, entfernt Bildlaufleisten, Symbolleisten und Navigationsfenster. Ich werde meinen Beitrag aktualisieren, wenn ich auf etwas stoße, das auch im IE funktioniert.
<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>
Das ist die beste Lösung, denn sie nutzt die Möglichkeiten des Browsers und nicht eine komplizierte Drittanbieterlösung. In allen modernen Browsern (IE9, FF oder Chrome) sollte PDF gut eingebettet werden. Tut mir leid für IE 6/7 Benutzer. Sie müssen aufrüsten. Wir haben die Unterstützung für diese Browser schon vor langer Zeit eingestellt :(
Mit beiden <object> y <embed> bietet Ihnen eine größere Bandbreite an Browser-Kompatibilität.
<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>
Dies wird in Browsern nicht funktionieren, wenn das pdf-Addon nicht installiert oder veraltet ist.
Auch wird dies nicht für diejenigen, die mit Code-Validierung betroffen sind zu validieren.
Dies hat bei mir gut funktioniert, während die Verwendung des embed Tag selbst wurde als unsafe von Chrome und Firefox.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
9 Stimmen
Versuchen Sie pdf2htmlEX: github.com/coolwanglu/pdf2htmlEX
1 Stimmen
Es gibt einen großartigen Vergleich nicht nur von spezifischen Lösungen, sondern auch von allgemeinen Strategien, im Wiki des pdf2htmlEX-Repos . Außerdem habe ich es noch nicht ausprobiert, este scheint eine beibehaltene Abzweigung zu sein.