webentwicklung-frage-antwort-db.com.de

Anzeige PDF im Webbrowser

Wie kann ich ein PDF in einem Webbrowser auf einer HTML-Seite anzeigen?

htmlpdfbrowser
73
CodeGuy

Ich verwende den eingebetteten Google Text & Tabellen-Viewer PDF). Die Dokumente müssen nicht in Google Text & Tabellen hochgeladen werden, sie müssen jedoch online verfügbar sein.

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>
108
bradenkeith

anstelle von iframe und abhängig von der third party, denken Sie darüber nach, Flexpaper oder pdf.js zu verwenden.

Ich habe pdf.js verwendet, es funktioniert gut für mich.

hier ist die Demo: http://mozilla.github.com/pdf.js/web/viewer.html

32
navins

Am einfachsten ist es, ein iframe zu erstellen und die Quelle auf die URL der PDF-Datei festzulegen.

(duckt sich in verrückte HTML-Designer) Selbst gemacht, funktioniert gut, Browserübergreifend (kriecht in den Bunker).

18
Will

bevorzugt mit dem Objekt-Tag

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

beachten Sie, dass Sie die Breite und Höhe in einen beliebigen Wert ändern können, den Sie unter http://www.w3schools.com/tags/tag_object.asp aufrufen

12
BAKARI SHEGHEMBE

Das Plugin des Browsers steuert diese Einstellungen, sodass Sie sie nicht erzwingen können. Sie können jedoch ein einfaches <a href="whatver.pdf"> anstatt <a href="whatever.pdf" target="_blank">.

6
jschorr

Sie können JavaScript auch über eine Drittanbieterlösung wie PDFObject einbetten.

3
Nils Magne Lunde

Solange Sie das PDF das Zielattribut hosten, ist dies der richtige Weg. Mit anderen Worten, bei relativen Dateien funktioniert die Verwendung des Zielattributs mit _blank-Wert einwandfrei.

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Bei absoluten Pfaden werden die Suchmaschinen zur U nified R esource L ocator und öffne es ihr. Unterdrücken Sie also das Zielattribut.

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Browser leisten in beiden Fällen gute Arbeit.

3
ftcosta

Sie können diesen Code verwenden:

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.Adobe.com/products/acrobat/readstep2.html">

Oder verwenden Sie den in Google Text & Tabellen einbettbaren PDF viewer:

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>
1
Hieu Le

Sie können auch diesen einfachen GoogleDoc-Ansatz verwenden.

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

Auf diese Weise wird eine neue Seite erstellt, auf der Sie das Dokument anzeigen können, ohne Ihren Ablauf zu verzerren.

1
Asuquo12

Die einfache Lösung besteht darin, es in einen iframe zu setzen und zu hoffen, dass der Benutzer ein Plug-In hat, das es unterstützt.

(Ich weiß nicht, das Acrobat-Plugin war so ein Ressourcenfresser und eine Quelle der Instabilität, dass ich darauf hinweise, es von jedem Browser zu entfernen, den es berührt).

Die komplizierte, aber relativ beliebte Lösung besteht darin, sie in einem Flash-Applet anzuzeigen.

0
Quentin

Wir rendern die PDF Dateiseiten als PNG-Dateien auf dem Server mit JPedal (a Java Bibliothek). Das, kombiniert mit einigen Javascript gibt uns eine hohe Kontrolle über die Visualisierung und Navigation.

0
Carles Barrobés