PDF im Webbrowser anzeigen

84

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

html pdf browser CodeGuy
quelle

Antworten:

120

Ich verwende den in Google Text & Tabellen einbettbaren PDF-Viewer. Die Dokumente müssen nicht in Google Text & Tabellen hochgeladen werden, sondern müssen 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>
Bradenkeith
quelle
3
Mit dieser Lösung sehen einige Benutzer die PDF-Datei nicht, werden jedoch von Google aufgefordert, sich zuerst anzumelden.
Philipp Zedler
41
Ich habe eine Frage zu dieser Lösung. Wird Google eine Kopie meiner PDF-Datei auf seinen Servern speichern? Wird die Privatsphäre meiner Inhalte erhalten bleiben?
hd.
@Alex, um sicher zu wissen, versuchen Sie ... Ich würde versuchen -: //docs.google.com/gview? Url =: //path.com/to/your/pdf.pdf&embedded=true als iframe src
bradenkeith
Wie unterscheidet sich dies von der Lösung von @ Will, den src des iFrame direkt auf das PDF zu setzen? Ich gehe davon aus, dass die direkte Verknüpfung von der Seite des Software-Clients abhängt, um das PDF tatsächlich anzuzeigen, aber würde Google Docs dies nicht auch tun?
Félix Gagnon-Grenier
3
@hd. Ja, Google zeigt die PDF-Datei nur über die eingebettete Anzeige an. Ich glaube nicht, dass sie eine Kopie behalten, obwohl sie sie in eine seitenweise Anzeige übersetzen müssen. Ich gehe daher davon aus, dass sie irgendwann Seite für Seite in PNG konvertieren. Wenn Sie diese Antwort verwenden, beachten Sie bitte, dass Google ein Bandbreitenlimit für Dokumente hat, die nicht von Google Document stammen. Sobald es erschöpft ist, wird das PDF nicht mehr angezeigt, sondern nur eine Meldung, dass die Bandbreite überschritten wurde, und es später erneut zu versuchen.
Jon
36

anstatt iframe zu verwenden und je nach Drittanbieter über die Verwendung von Flexpaper oder pdf.js nachzudenken.

Ich habe PDF.js verwendet , es funktioniert gut für mich. Hier ist die Demo .

navins
quelle
3
Wie ist es nicht ein Dritter?
Alex
41
Es handelt sich eher um einen Code eines Drittanbieters als um einen Dienst eines Drittanbieters.
Collin Anderson
Bessere Lösung für Anwendungen für VPN-Umgebungen.
Erlan
19

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 auf einen beliebigen Wert ändern können. Besuchen Sie dazu http://www.w3schools.com/tags/tag_object.asp

BAKARI SHEGHEMBE
quelle
Das, was Sie gepostet haben, bietet keinen weiteren Einblick in die Antwort.
Daniël W. Crompton
2
Die Frage war: Wie kann ich ein PDF in einem Webbrowser auf einer HTML-Seite anzeigen? Die Verwendung des HTML 5-Objekt-Tags hilft ... <object width = "400" height = "400" data = "helloworld.swf"> </ object> Verwenden Sie dieses Element zum Einbetten von Multimedia (wie Audio, Video, Java-Applets, ActiveX, PDF und Flash) auf Ihren Webseiten.
BAKARI SHEGHEMBE
Sie haben völlig Recht, aber der Link zu w3schools enthält keine weiteren Informationen, die die Antwort, wie Sie sie geschrieben haben, ergänzen.
Daniël W. Crompton
Dies würde nicht funktionieren, wenn Sie keinen PDF-Viewer in Ihrem Browser haben
Umair Hamid
1
Ja, das ist wahr. Eine gute Sache am Objekt-Tag ist, dass es das erkennen kann. Außerdem können Sie den Besuchern weitere Optionen zum Anzeigen der Seite über gdrive, onedrive usw. hinzufügen. <Object data = ' example.com/path.pdf#toolbar=1'type='application/pdf ' width = ' 100% 'height =' 700px '> <p> Ihr Webbrowser ist anscheinend nicht für die Anzeige von PDF-Dateien konfiguriert. Keine Sorge, klicken Sie einfach <a href='beispiel.com/path.pdf'> hier, um die PDF-Datei herunterzuladen. </a> oder <a href = " drive.google.com/[drive path] / view? Usp = Teilen "> Klicken Sie hier, um es anzuzeigen </a> </ p> </ object>
BAKARI SHEGHEMBE
19

Am einfachsten ist es, einen Iframe zu erstellen und die Quelle auf die URL der PDF festzulegen.

(duckt verrückte HTML-Designer) Ich habe es selbst gemacht, funktioniert gut, Cross-Browser (kriecht in den Bunker).


quelle
8
funktioniert nicht, wenn Sie das PDF-Plugin nicht auf IE installiert haben
Collin Anderson
3
Wie ist das offensichtlich? Scheint ein nützlicher Nachtrag zu "Cross-Browser".
Showdev
1
Dies war so viel einfacher einzurichten als alle anderen von Drittanbietern. Ich weiß nicht, wie es 2011 funktioniert hat, aber 2016 ist es sehr schnell und voller nützlicher Funktionen. Scheint auch großartig in Chrome, FF und IE zu funktionieren
Slaw
1
Es funktioniert nicht für mich in Chrome auf Android-Handys: Es lädt PDF herunter und öffnet es in einer separaten App (falls Sie eine haben). Und ich kann in Safari unter iOS nicht zu anderen Seiten scrollen. Ich sehe nur die erste Seite von pdf.
Vasiliy Zverev
7

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

jschorr
quelle
Endlich jemand, der weiß, wovon er für diese Antwort spricht. Dies ist die beste und einfachste Antwort. @jschorr ist absolut richtig. Der Browser steuert diese Einstellung. Am effizientesten!!
Val
4

Solange Sie die PDF-Datei hosten, ist das Zielattribut der richtige Weg. Mit anderen Worten, für relative Dateien funktioniert die Verwendung des Zielattributs mit dem Wert _blank einwandfrei.

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

Für absolute Pfade Motoren zum gehen U nified R esource L ocator und öffnen ihre. 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.

ftcosta
quelle
Diese Lösung hat für mich viel besser funktioniert als die akzeptierte Antwort. Es sollte auch beachtet werden, dass ich mit vertraulichen Informationen arbeite. Daher war es mir wichtig, dass meine Dokumente nicht öffentlich verfügbar sind.
Casper Wilkes
3

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>
Hieu Le
quelle
1

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>

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

Asuquo12
quelle
Das funktioniert gut, danke. Aber was ist im Fall von, wenn der Benutzer das PDF ohne Internetverbindung sehen möchte?
Benutzer
Sie können eine JQuery-Bibliothek wie pdf.js github.com/mozilla/pdf.js verwenden . 2. Schauen Sie sich PDFObject an, eine Javascript-Bibliothek zum Einbetten von PDFs in HTML-Dateien. Es handhabt die Browserkompatibilität ziemlich gut und wird höchstwahrscheinlich auf IE8 funktionieren.
Asuquo12
0

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 es unbedingt aus jedem Browser entfernen möchte, den es berührt).

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

QUentin
quelle
0

Wir rendern die PDF-Dateiseiten mit JPedal (einer Java-Bibliothek) als PNG-Dateien auf dem Server . In Kombination mit etwas Javascript haben wir eine hohe Kontrolle über Visualisierung und Navigation.

Carles Barrobés
quelle
Ich finde das großartig, brauche aber viele Ressourcen.
Evaevans
Benutzer können jedoch keinen Text aus PNG kopieren / einfügen.
Vasiliy Zverev
0

Ich musste kürzlich eine mobilfreundlichere, reaktionsschnellere Version eines PDF-Dokuments bereitstellen, da auf schmalen Telefonbildschirmen häufig nach rechts und links gescrollt werden musste. Die folgenden Schritte haben bei mir funktioniert, um nur vertikales Scrollen zu ermöglichen und horizontales Scrollen zu vermeiden:

  • Öffnen Sie die PDF-Datei im Chrome-Browser
  • Klicken Sie auf Mit Google Text & Tabellen öffnen
  • Klicken Sie auf Datei> Download> Webseite
  • Klicken Sie auf das heruntergeladene Dokument, um es zu entpacken
  • Klicken Sie auf das entpackte HTML-Dokument, um es im Chrome-Browser zu öffnen
  • Drücken Sie fn F12, um Chrome Dev Tools zu öffnen
  • Fügen Sie eine Kopie (document.documentElement.outerHTML.replace (/ padding: 72pt 72pt 72pt 72pt; /, '') .replace (/ margin-right :. *? Pt / g, '')) in die Konsole ein und drücken Sie die Eingabetaste um das optimierte Dokument in die Zwischenablage zu kopieren
  • Öffnen Sie einen Texteditor (z. B. Editor) oder in meinem Fall VSCode, fügen Sie ihn ein und speichern Sie ihn mit der Erweiterung .html.

Das Ergebnis sah gut aus und war sowohl in Desktop- als auch in mobilen Umgebungen verwendbar.

Marcus
quelle
-4

Haben Sie versucht, ein einfaches img-Tag zu verwenden?

<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">
Mat Barnett
quelle
Weiß jemand, wie dies unterstützt wird?
Bert Bruynooghe
1
Das ist unmöglich.
Henrique Van Klaveren