Ein PDF Dokument direkt auf deiner Seite anzeigen
Hin und wieder taucht die Frage im Support und auch im Forum auf “wie kann ich denn ein .pdf Dokument direkt auf meiner Seite anzeigen?”.
Die einfachste Möglichkeit, sowohl für dich als Seitenbetreiber, als auch für deinen Webseitenbesucher, ist es wohl, die Datei direkt als Download anzubieten.
<a href="https://die-URL-Adresse-zu-deiner-PDF-Datei" target="_blank">DOWNLOAD</a>
Aber oft ist es ja doch auch so, dass man vielleicht erst einmal sehen möchte, was man sich denn da überhaupt auf seinen Rechner herunterlädt.
Der Google-Viewer für deine .pdf Dokumente
Das Stichwort lautet hier “Google-Viewer”. Mit diesem kannst du deine hochgeladenen .pdf Dokumente direkt auf deiner Seite einbinden und die Besucher deiner Seite können die Dokumente direkt und ohne zusätzliche Browser Plugins betrachten.
Und so funktioniert es:
Als Premium Paket Plus Kunde hast du jederzeit die Möglichkeit Dateien innerhalb deines Accounts hochzuladen. Dazu gehst du nach erfolgreichem Login auf den Menüpunkt Dateien. Hier kannst du deine Dateien, wie beispielsweise ein .pdf Dokument, einfach per Drag and Drop hochladen.
Sofern du (noch) kein Premium Kunde bist, suchst du dir einfach einen der kostenlosen Dateihoster aus und lädst dort deine Datei / dein .pdf Dokument hoch.
Alles was du nun noch brauchst ist die URL, unter der dein .pdf zu erreichen ist. Dazu klickst du einfach auf den Dateinamen und kopierst dir später einfach per Copy & Paste ( mit der Maus in die Browserzeile oben klicken, dann die Tastenkombination STRG + A, um alles auszuwählen, mit STRG + C kopiert man das ausgewählte und mit STRG + V fügt man das Kopierte an beliebiger Stelle wieder ein ) die Adresszeile aus deinem Browserfenster, welches sich neu geöffnet hat und dein .pdf Dokument anzeigt.
Jetzt öffnest du eine deiner Seiten, im besten Fall die Seite, auf der schlussendlich dein .pdf angezeigt werden soll und klickst in deinem Editor links oben auf “Quellcode”.
Danach kopierst du folgenden Code Schnipsel an die Stelle, an der dein .pdf Dokument angezeigt werden soll.
<object data="https://die-URL-Adresse-zu-deiner-PDF-Datei" style="width:100%;height:700px">
<a href="https://die-URL-Adresse-zu-deiner-PDF-Datei">PDF laden</a>
</object>
Diese Stelle hier https://die-URL-Adresse-zu-deiner-PDF-Datei tauscht du mit der URL aus, unter der dein .pdf Dokument zu erreichen ist, die Angaben width:100% und height:700px kannst du dir, je nachdem wie du es passend auf deiner Webseite anzeigen möchtest, beliebig in der Breite ( width ) und in der Höhe ( height ) anpassen und auf deine Bedürfnisse zurechtbiegen.
Jetzt noch die Seite abspeichern und schon wird das .pdf Dokument auf deiner Seite angezeigt.
Parallel dazu solltest du den Besuchern deiner Webseite aber noch die Möglichkeit anbieten, das Dokument über einen Link herunterzuladen. Dies kannst du mit diesem HTML Code ermöglichen:
<a href="https://die-URL-Adresse-zu-deiner-PDF-Datei" target="_blank">DOWNLOAD</a>
wobei hier natürlich wieder entsprechend die URL Adresse deines Dokumentes eingetragen werden muss und der Text DOWNLOAD kann natürlich auch deinen eigenen Bedürfnissen angepasst werden.
Wer sich ein wenig mit HTML auskennt, der kann sich hier auch einen schicken Download Button erstellen.
Beachte dabei das Internet-Recht
Egal ob Fotos, Videos, Musik oder PDF-Dateien - wenn du etwas auf deiner Website bereitstellst, darfst du das Urheberrecht nicht vergessen.
Da es sich beim Internet-Recht um ein gleichzeitig komplexes und unglaublich wichtiges Thema handelt, haben wir dir hier ein paar grundlegende Informationen zusammengestellt.
Weiterführende Tipps für deine Website
Dank dieses Artikels weißt du nun, wie du eine PDF-Datei direkt in eine Seite integrieren kannst. Hast du aber schon mal darüber nachgedacht deinen Webauftritt weiter zu optimieren? Da eine eigene Website zwar viele unterschiedliche Zwecke erfüllen kann, aber häufig als Online-Präsenz für Selbstständige dient, haben wir diesem Thema in unserer Tipps-Sektion einen eigenen Bereich gewidmet.
Diese Berufsgruppen sind unter anderem dabei:
Zurück zur Übersicht