Share |
World time
Sarah Jordan Photograhy
Sarah Jordan Photograhy
Sarah Jordan, Autorenseite
Sarah Jordan, Autorenseite
Sarah Jordan Story
Sarah Jordan Story
Homepage erstellen
Tutorial Document Viewer
Tutorial Document Viewer

Tutorial Document Viewer

In diesem Tutorial stelle ich Euch drei konstenlose Möglichkeiten für das Einbinden und Anzeigen von Dokumenten, wie PDF, Doc, xls etc. vor.

 

Um die Dokumente auf Eurer Seite anzeigen zu können, solltet ihr folgende Vorbereitungen treffen. Die zum Anzeigen gewünschten Dateien ladet ihr, per Downloadmodul, auf eine versteckte Seite Eurer Jimdo Page. Dann wechselt man auf den Ansichtmodus und kopiert per rechter Maustaste den Link der Downloaddatei. Der Einfachheit halber sollte man den/die Link(s) in z.B. Windows Editor einfügen. So hat man sie später schnell zu Hand und erspart sich den ständigen Wechsel zwischen Bearbeitungs- und Ansichtmodus.

 

Damit wären die Vorberitungen soweit abgeschlossen.

 

 

Hinweis:

Bei allen drei Anbietern kann man die Url zu seinem Dokument eingeben und es wird ein Code zum Einbetten generiert, den man in ein Widget/Html Modul einfügt. Es ist keine Registrierung erforderlich.

 

 

 

 

Google Document Viewer

 


An der bezeichneten Stelle des Html-Iframe-Tags fügt ihr die Url des Dokuments ein. Dann kopiert ihr den gesamten Tag und fügt ihn auf eurer Seite in ein Widget/Html Modul ein. Bei width und height könnt ihr die Werte entsprechend eurer Contenbreite anpassen, wobei dazu nur der Wert von width relevant ist, da die Länge im Grunde keine Rolle spielt, bezüglich eures gewählten Layouts.

 

 

<iframe src="http://docs.google.com/gview?url=Url der DateiHier die Url der Downloaddatei einfügen&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

 

Unten jetzt ein Beispiel dieses Viewers mit einer PDF Datei. Die Höhe des Viewers ist bewusst gering gehalten, um die Tutorialseite nicht unnötig in die Länge zu ziehen.

 

Der Google Document Viewer kann PDF, Power Point Präsentationen und Tiff Dokumente darstellen.

 

ZOHO Viewer

 


Der ZOHO Viewer kann im Gegensatz zurm Google Docs Viewer noch weitere Dokumente darstellen.

 

Hier eine Auflistung:

 

Microsoft: doc, docx, xls, xlsx, ppt, pptx, pps

 

Open Document: odt, ods, odp

 

OpenOffice: sxw, sxc, sxi

 

Andere Formate: wpd, pdf, rtf, txt, html, csv, tsv

 

 


<iframe src="http://viewer.zoho.com/docs/urlview.do?url=Url der DateiHier die Url der Downloaddatei einfügen&embed=true" frameborder="0" width="600" height="500"> </iframe>

 

Ihr könnt auch direkt auf die Webseite des Anbieters gehen und dort entweder die Datei vom PC hochladen oder die Url eingeben. Dann braucht man nur noch auf Ansicht zu klicken. Das Dokument wird angezeigt und in der Menueleiste kann man Einbetten auswählen. Den Code kopieren und auf der Seite in ein Widget/Html Modul einfügen

 

Looky Look Viewer

 


Beim Looky Look Viewer habt ihr die Wahl zwischen vier Anzeigemöglichkeiten.

 

Viewer mini:

 

<script type="text/javascript" src="http://viewer.looky-look.net/v.js.php/viewer_mini/Url der DateiHier die Url der Downloaddatei einfügen">
</script><noscript><a href="http://www.looky-look.net/">Document Viewer</a></noscript>

 

Viewer normal:

 

<script type="text/javascript" src="http://viewer.looky-look.net/v.js.php/viewer_normal/Url der DateiHier die Url der Downloaddatei einfügen">
</script><noscript><a href="http://www.looky-look.net/">Document Viewer</a></noscript>

 

Viewer fullscreen:

 

<script type="text/javascript" src="http://viewer.looky-look.net/v.js.php/viewer_full/Url der DateiHier die Url der Downloaddatei einfügen">
</script><noscript><a href="http://www.looky-look.net/">Document Viewer</a></noscript>

 

Viewer Flash:

 

<iframe frameborder="0" scrolling="no" src="http://looky-look.net/flapdf/?url=Url der DateiHier die Url der Downloaddatei einfügen" width="800"
height="600"></iframe><noframes><a href="http://www.looky-look.net/">Document Viewer</a></noframes>

 

 

Code kommt wie immer in ein Widget/Html Modul.

 

 

Tipp und Trick zum Schluss

 


 

Oftmals ist es so, dass man mehrere Dateien (z.B. PDF) zum Dorwnload anbietet. Problem dabei ist, wenn man für jede Datei das Iframe einbindet, so hat man mehrere Viewer auf seiner Seite. Macht nicht wirklich Sinn.

 

Hier gibt es einen kleinen Trick. Ihr setzt die Iframes mit den Vierwern alle auf eine versteckte Seite eurer Jimdo Page.

 

Dann wechselt man in den Ansichtmodus und klickt per rechter Maustaste auf den gewünschten Viewer. Im offenen Kontextmenue wählt man aktueller Frame (Anzeige, Bezeichnung im Kontextmenue ist browserabhängig) und dann aktuellen Frame in neuem Tab anzeigen/öffnen.

Nun geht man hin und kopiert in der Adressleiste des Browsers die Url. Jetzt legen wir auf der Seite auf der der Download zur Verfügung gestellt werden soll, ein Textmodul an (kann auch ein Banner oder Grafik sein) Dort schreiben wir z.B. PDF xyz anzeigen, markieren den Text, klicken auf das Kettensymbol und fügen den zuvor kopierten Link in das Feld externer Link ein, klicken auf Link setzen, abspeichern, fertig. Jetzt kann der Besucher wählen, ob er die Datei direkt downloaden oder zuerst ansehen möchte.

Das Ganze lässt sich dann auch noch übersichtlich in eine Tabelle setzen.

 

Wie man Downloads in Tabellen setzt könnt ihr hier nachlesen.

 

 

Hier ein Beispiel dieser Vorgehensweise.

 

PDF anzeigen

PDF Test