Brixlent
I'm new here

Druckvorschau HTML

Hallo zusammen,

ich möchte für meine HTML - Seite eine Druckvorschau erzeugen, welche abweichend zu der eigenen Seite aussieht.

Ich weiß dass man so etwas über die media-Anwendung (media="print, embossed") realisieren kann.

Meine Frage ist jedoch, wie bekomme ich es in FS 5 hin, dass alle meine versch. Seiten einen Link/Button "Drucken" haben und dieser ein neues Browserfenster öffnet, welcher diese "Eigenschaft" setzt?

Ich hoffe es kann mir jemand weiterhelfen!

PS: Falsch ich mit der media-Anwendung auf dem falschen Weg bin und es in FS eine andere Möglichkeit gibt bin ich für entsprechende Tipps u. Hinweise sehr dankbar. Aus der Hilfe und innerhalb der Community konnte ich bis jetzt nichts finden.

Viele Grüße

Matthias

0 Kudos
7 Replies
rednoss
I'm new here

Hallo Matthias,

im dem FirstSpirit Beispiel Projekt Mithras Energy kannst du eine Beispiel Implementierung zu deiner Frage finden. Der entsprechende Quellcode steht am Ende der Seitenvorlagen Homepage und Standard.

Beispiel:

<li>

          <a href="#top" onclick="self.print();return false;"$CMS_VALUE(editorId(element:#global.gca("print"), editorName:"pt_label"))$>

                    <img src="$CMS_REF(media:"icon_print")$" alt="" />

                    $CMS_VALUE(#global.gca("print"))$

          </a>

</li>

Viele Grüße

René

0 Kudos

Hallo Rene,

danke für die Antwort.

Diese Lösung hilft mir jedoch leider nicht weiter. self.print() ist ja nur die JavaScript - Funktion die das Drucken des Browsers aufruft.

Ich habe keine HTML-Vorschau (neues Fenster mit anderem CSS)!

Was ist wenn der User JavaScript deaktiviert hat?

Viele Grüße

Matthias

0 Kudos

Hallo Matthias,

dann hatte ich dich wohl falsch verstanden. Du möchtest also über einen Button eine Druckvorschau in einem neuen Tab öffnen? In dem Tab möchtest du dann mit einem angepassten CSS die Inhalte so anzeigen wie sie gedruckt werden würden?

Dafür erstellst du dir einen neuen Ausgabekanal in dem du die Druckvorschau implementierst. Im HTML Ausgabekanal definierst du dann einen Link der auf die aktuelle Seite, aber in einen anderen Ausgabekanal verweist.

<a href="$CMS_REF(#global.ref, templateSet:"drucken")$"> [...] </a>

Im Mithras Energy Projekt wird die gleiche Vorgehensweise für den Link "PDF-Version" verwendet.

Grüße

René

0 Kudos

Hallo Rene,

genau das meinte ich.

Das mit dem zusätzlichen Kanal ist mir dabei auch schon eingefallen. Wir verwenden ja auch bereits einen eigenen PDF-Kanal.

Das ist jedoch für mich auch keine vernünftige Lösung, denn ich müsste ja dann in diesen zusätzlichen Kanal die komplette HTML-Ausgabe aller meiner Seiten-, Absatz- und Linkvorlagen kopieren. Der Aufwand ist bei einem großen Projekt erheblich. Zudem hätte ich dann immer den doppelten Aufwand wenn eine Änderung vorgenommen wird.

Ich fürchte fast es gibt keine vernünftige Lösung die in jedem Fall funktioniert (auch bei ausgeschaltetem JS)

!?

Gruß

Matthias

0 Kudos

Hallo Matthias,

ggf. ist es bei euch sinnvoll die PDF-Version als Druck Version zu nehmen oder auf die Browserfunktion zurückgreifen. Andernfalls könnt ihr in der URL einen Parameter für die Druckvorschau mitübergeben und bei true die CSS für die Druckvorschau verwenden.

Viele Grüße

René

0 Kudos

Hi,

genau diese Punkte haben wir auch schon diskutiert und unserem Kunden vorgeschlagen.

Problem dabei ist, dass wenn wir die PDF-Version verwenden passiert beim Drucken-Link etwas anderes als bei Drucken im Browser.

2. URL-Parameter können ja nur via JS oder eine Programmiersprache (PHP, etc.) ausgelesen werden und dementsprechend das CSS eingebunden werden. Wir haben aber die Anforderung HTML-Seiten zu generieren und kein PHP!

Insgesamt gäbe es viele Möglichkeiten, die sich jedoch mit den Vorgaben unseres Kunden nicht uneingeschränkt umsetzen lassen.

Wir haben dem Kunden jetzt 3 Lösungsvorschläge die sich mit deinen Vorschlägen decken unterbreitet und warten auf eine Entscheidung.

Dieser Beitrag kann dann geschlossen werden.

Gruß

Matthias

0 Kudos

Hallo Matthias,

wenn das Ganze komplett ohne JS und mit purem HTML funktionieren soll, bleibt ja eigentlich nur das tatsächliche Generieren der entsprechenden Druckvorschauseiten "parallel" zu den eigentlichen Seiten. Die Idee mit dem zusätzlichen Ausgabekanal geht ja in diese Richtung, hat aber entsprechende Nachteile.

Vielleicht könnte man auch folgendes machen (nur als grobe Idee):

Die Grundidee ist, einfach denselben Ausgabekanal zwei mal zu generieren, dabei aber eine Generierungsvariable zusammen mit einer Namenskonvention für die URLs der PrintPreview (die beim zweiten Durchlauf erzeugt wird) zu verwenden.

Also: Eigentliche Generierung der Webseiten (Browseransicht) durchführen, generierte Dateien in ein temporäres Verzeichnis kopieren (oder theoretisch auch direkt deployen). Dabei den Druckvorschau-Link als Link der Seite auf sich selbst, aber mit "manipulierter" URL erzeugen, grob nach folgendem Prinzip:

<a target="_blank" href="$CMS_VALUE(#global.ref.url.replace(".html","_print.html"))$">Druckvorschau</a>

Dann eine zweite Generierung derselben Seiten (jetzt aber ohne Medien) durchführen, bei der zweiten Generierung eine Generierungsvariable im Generierungstask setzen (z.B. gv_printPreview=1). Diese in den Templates auswerten und dann das "PrintPreview"-HTML statt des "normalen" erzeugen. Viele Stellen sollten es ja nicht sein.

Wenn man jetzt noch dafür sorgt, dass die Dateien der zweiten Generierung von *.html in *_print.html umbenannt werden und diese dann wieder mit denen der ersten Generierung zusammenführt, müsste es eigentlich passen...

Viele Grüße

Michael