Wie binde ich einen PDF-Viewer in eine Seite ein?

Wenn ich mich nicht irre, bietet Google Text & Tabellen die Möglichkeit, eine PDF-Datei, die auf demselben Server wie die Webseite gespeichert ist, über eine anzuzeigen. <iframe>Ich muss jedoch wissen, wie ich dies browserübergreifend tun kann.

Sie können PDFObject von Philip Hutchison verwenden.

Wenn Sie nach einer Nicht-Javascript-Lösung suchen, können Sie alternativ das folgende Markup verwenden:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

PDF.js ist ein HTML5-Technologieexperiment, bei dem untersucht wird, wie ein zuverlässiger und effizienter PDF-Renderer (Portable Document Format) ohne native Codeunterstützung erstellt wird. Es ist Community-gesteuert und wird von Mozilla Labs unterstützt.

Sie können die Demo hier sehen .

Dies könnte auf diese Weise etwas besser funktionieren

<embed src= "MyHome.pdf" width= "500" height= "375">

Wenn ich mich nicht irre, fragte das OP (obwohl es später eine .js-Lösung akzeptierte), ob der eingebettete PDF-Anzeigeserver von Google ein PDF auf seiner eigenen Website anzeigen wird.

Also, eineinhalb Jahre später: Ja, das wird es.

Siehe http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html . Siehe auch https://docs.google.com/viewer und geben Sie die URL der Datei ein, die Sie anzeigen möchten.

Bearbeiten: Beim erneuten Lesen fragte OP nach Lösungen, die keine iFrames verwenden. Ich denke nicht, dass dies mit Googles Viewer möglich ist.

Probieren Sie es mit Flex Paper aus http://flexpaper.devaldi.com/

es funktioniert wie scribd

Stellen Sie sicher, dass Sie jede Lösung in verschiedenen Reader-Einstellungen testen. Ein Site-Besucher kann seinen Browser so einstellen, dass er die PDF-Datei in Reader / Acrobat im Gegensatz zum Browser öffnet, z. B. indem er das Acrobat-Plugin in Firefox deaktiviert.

Ich kann mir meiner Ergebnisse nicht sicher sein, da ich zwei verschiedene Acrobat-Plugins habe, die Firefox aufgrund meiner unterschiedlichen Versionen von Adobe Acrobat und Adobe Reader erkennt. Es scheint jedoch, dass Sie zumindest testen müssen, was passiert, wenn ein Website-Besucher kommt Der Browser ist so eingestellt, dass die PDF-Datei nicht im Browser geöffnet wird. Es könnte ziemlich ärgerlich sein, wenn sie sich eine ansonsten nutzbare Webseite ansehen und ihr Browser sie dazu bringt, eine PDF-Datei zu öffnen, von der sie glauben, dass sie sie nicht angefordert haben. In einigen Fällen wurde die PDF-Datei spontan in Adobe Reader und nicht im Browser geöffnet, und in anderen Fällen hat der Browser ein Dialogfeld geöffnet, in dem angegeben wurde, dass die Datei nicht vorhanden ist.

Ich bin auf solche Fehlanpassungen mit iframe und object gestoßen, unterschiedliche Probleme für unterschiedlichen Code.

Dies ist für einfachen HTML-Code. Ich habe die vorgeschlagenen Frameworks nicht ausprobiert.

Ich würde mich wirklich für FlowPaper entscheiden, insbesondere für den neuen Elements-Modus, den Sie hier finden: https://flowpaper.com/demo/

Es glättet die PDF-Dateien erheblich und hält gleichzeitig den Text scharf, was bedeutet, dass es auf Mobilgeräten viel schneller geladen wird

Mit Bootstrap können Sie eine reaktionsschnelle und mobile Datei zuerst einbetten.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

pdf2htmlEX von coolwanglu ist wahrscheinlich die beste Lösung, um eine PDF-Datei in HTML zu konvertieren. Sie können eine einfache Konvertierung durchführen und dann die HTML-Seite als Iframe oder ähnliches einbetten.