Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu der Vergleichsansicht

typo3:druckversion_mit_templavoila [12.07.2014 22:54] (aktuell)
wolfgang angelegt
Zeile 1: Zeile 1:
 +===== Druckversion mit Templavoila =====
  
 +Hier wird eine Druckversion der Seite mit Vorschau per Templavoila erzeugt.
 +
 +Der erste Codeblock erzeugt einen Link, der die Druckvorschau aufruft. In dieser Vorschau ist eine kleine Toolbar mit einem "​Drucken"​ und einem "​Schließen"​-Button. Die Toolbar und die Links müssen im eingebundenen Stylesheet entsprechend gestylt werden. Außerdem muss die komplette Toolbar per Print-Stylesheet (@media print) für den eigentlichen Druck wieder ausgeblendet werden.
 +
 +Der zweite Codeblock erzeugt ein neues PAGE-Objekt für den Druck.
 +
 +Des weiteren ist ein Beispiel für eine CSS-Datei beigefügt. Da ich das einfach aus einem bestehenden Projekt rauskopiert habe, sind hier auch weitere Elemente gestylt, die Layout-spezifisch sind, da müsste ihr das entsprechend eurem Layout anpassen.
 +
 +In der eingebundenen CSS-Datei sollten alle Anpassungen für den Druck stehen, zum Beispiel die Navigation ausblenden usw., da hier kein eigenes Template für den Druck verwendet wird.
 +
 +<code typoscript>​
 +# Printer-Symbol für Durckvorgang
 +# in diesem Beispiel wird ein Bild verwendet, kann natürlich auch ein reiner Text-Link sein
 +
 +lib.printer = IMAGE
 +lib.printer {
 +  file = fileadmin/​templates/​images/​printer.png
 +  altText = Seite drucken
 +  altText.lang.en = Print page
 +  ​
 +  stdWrap.typolink.parameter.data = TSFE:id
 +  stdWrap.typolink.parameter.wrap = |,98 710x600
 +  stdWrap.typolink.addQueryString = 1
 +  stdWrap.typolink.additionalParams = &​print=1&​no_cache=1
 +  stdWrap.typolink.JSwindow_params = status=0,​menubar=0,​scrollbars=1,​location=0,​toolbar=0
 +  ​
 +  stdWrap.typolink.title = Seite drucken
 +  stdWrap.typolink.title.lang.en = Print page
 +}
 +</​code>​
 +
 +<code typoscript>​
 +# Druckversion der Seite erstellen
 +# wenn der Druck automatisch beim Aufruf gestartet werden soll, das Kommentarzeichen vor bodyTag entfernen
 +
 +print = PAGE
 +print {
 +  # bodyTag = <body onload="​window.print();">​
 +  ​
 +  typeNum = 98
 +  includeCSS.print = fileadmin/​templates/​css/​print-template.css
 +  ​
 +  10 = TEXT
 +  10.value = <a href="​javascript:​window.print();">​Drucken</​a>​
 +  10.value.lang.en = <a href="​javascript:​window.print();">​Print</​a>​
 +  10.wrap = <div id="​printtoolbar"><​div id="​printlink">​|</​div>​
 +  20 = TEXT
 +  20.value = <a href="​javascript:​window.close();">​Schließen</​a>​
 +  20.value.lang.en = <a href="​javascript:​window.close();">​Close</​a>​
 +  20.wrap = <div id="​printcloselink">​|</​div></​div>​
 +  ​
 +  40 = HTML
 +  40.value = <div id="​printcontent">​
 +  50 = USER
 +  50.userFunc = tx_templavoila_pi1->​main_page
 +  60 = HTML
 +  60.value = </​div>​
 +}
 +</​code>​
 +
 +<code css>
 +/**
 +  * @section basic layout preparation
 +  * @see     ​http://​www.yaml.de/​en/​documentation/​css-components/​layout-for-print-media.html
 +  */
 +
 +.subcolumns,​.subcolumns>​div{overflow:​visible;​display:​table;​ float:​none;​width:​100%;​ margin:0; padding:​0;​}.print{position:​static;​left:​0}.noprint{display:​none!important}
 +.subcolumns div { margin:0; padding:0; }
 +
 +
 +  /* (en) change font size unit to [pt] - avoiding problems with [px] unit in Gecko based browsers ​ */
 +  /* (de) Wechsel der der Schriftgrößen-Maßheinheit zu [pt] - Probleme mit Maßeinheit [px] in Gecko-basierten Browsern vermeiden */
 +  body { font-size:​10pt;​ background:#​fff;​ color:#​000;​}
 +  #main { background: transparent;​ }
 +
 +  /* (en) Hide unneeded container of the screenlayout in print layout */
 +  /* (de) Für den Druck nicht benötigte Container des Layouts abschalten */
 +  #topnav, #nav, #search, nav, .langmenu, .breadcrumbs,​ .maillink ​ { display:​none;​ }
 +
 +  /​*------------------------------------------------------------------------------------------------------*/​
 +
 +  /* (en) Avoid page breaks right after headings */
 +  /* (de) Vermeidung von Seitenumbrüchen direkt nach einer Überschrift */
 +  h1,​h2,​h3,​h4,​h5,​h6 { page-break-after:​avoid;​ }
 + 
 +
 +  /​*------------------------------------------------------------------------------------------------------*/​
 +
 +  /* (en) optional output of acronyms and abbreviations*/​
 +  /* (de) optionale Ausgabe von Auszeichnung von Abkürzungen */
 +
 +  /*
 +    abbr[title]:​after, ​
 +    acronym[title]:​after { content:'​('​ attr(title) '​)';​ }
 +  */
 +
 +  /​*------------------------------------------------------------------------------------------------------*/​
 +
 +  /* (en) optional URL output of hyperlinks in print layout */
 +  /* (de) optionale Ausgabe der URLs von Hyperlinks */
 +  /*
 +  a[href]:​after {
 +    content:"​ <​URL:"​attr(href)">";​
 +    color:#444;
 +    background:​inherit;​
 +    font-style:​italic;​
 +  }
 +  */
 +  ​
 +  #​printheader img{width:​100%;​height:​auto}
 +  ​
 +  #​footer{border-top:​4px solid #​A5032D;​margin-top:​2em;​padding:​1em 0; color:#​000;​}
 +  .footercontent { text-align:​left;​ }
 +  ​
 +  #​printtoolbar { padding:​1em;​ border-bottom:​ 1px dotted #666; overflow:​hidden;​ background:#​333;​ color:#fff; margin-bottom:​1em;​}
 +  #​printtoolbar a, #​printtoolbar a:visited { color:#000; }
 +  #​printlink,#​printcloselink { width:40%; font-size:​150%;​ }
 +  #printlink { float:left; }
 +  #​printcloselink { float: right;}
 +  ​
 +  #printlink a {display: block; width:​4em;​height:​20px;​ background: #eee url(images/​printer.png) 5px 50% no-repeat; padding: 3px 5px 5px 30px; text-decoration:​none;​ -moz-border-radius:​5px;​ -webkit-border-radius:​5px;​ border-radius:​5px;​}
 +  #​printcloselink a {float:​right;​ display: block; width:​5em;​height:​20px;​ background: #eee url(images/​close.png) 5px 50% no-repeat; padding: 3px 5px 5px 30px; text-decoration:​none;​ -moz-border-radius:​5px;​ -webkit-border-radius:​5px;​ border-radius:​5px;​ }
 +  ​
 +  #printlink a:hover,
 +  #​printcloselink a:hover { background-color:#​fff;​ }
 +  ​
 +  #​printcontent { clear:both; }
 +  ​
 +@media print {
 +
 +#​printtoolbar { display:​none;​ }
 +
 +}
 +</​code>​