Printervriendelijke pagina's

Op veel websites vind je een knop of link die het makkelijk maakt om de pagina te printen. Als je er op klikt verschijnt dan een popup waarin dezelfde pagina verschijnt, maar dan zonder menu of andere franje (zoals reclame). Die pagina kan dan naar de printer worden gestuurd.
In de linker kolom zie je een eenvoudig voorbeeld. Als je klikt op "Print-pagina" verschijnt de pagina in een popup, echter zonder de bovenbalk en de menu-kolom.
Op deze pagina wordt een wat 'mooiere' uitvoering gepresenteerd.

De aanpak is niet éénduidig vast te leggen. Deze bladzijde toont slechts één van vele manieren om het voor elkaar te krijgen.

Printervriendelijke pagina Natuurlijk ontbreekt een voorbeeld van de 'mooie' aanpak niet. Klik op de printer hiernaast.

Zoals je ziet zijn er in de opmaak vijf dingen veranderd:

1. De knoppen voor de navigatie en de titelbalk zijn geheel verdwenen.
2. De achtergrond is wit in plaats van paars-blauw.
3. Het font is veranderd van Verdana 10 pt in Arial 11 pt (Arial is op papier beter te lezen dan Verdana).
4. De tekst bij het printer-icon is veranderd van "Printervriendelijke pagina" in "Print document".
5. Onderaan de bladzijde verschijnt het logo van deze website en wordt de URL van deze site getoond. Daarbij staat ook een link om de popup te sluiten.

Als je in de popup weer op de printer klikt wordt een venster geopend waarin je een printer kunt kiezen. Je kunt nu de pagina laten afdrukken.

Met behulp van CSS en JavaScript is dit redelijk eenvoudig te realiseren.
De code van het voorbeeld staat onderaan deze pagina. Je kunt hem downloaden om zelf te gebruiken.

De aanpak bestaat uit de volgende stappen:

• Open een popup en laad daar dezelfde bladzijde in. Zie het item Window openen/sluiten vanuit een ander window.
• Vervang het stylesheet door een ander sheet waarmee de opmaak voor de printer is vastgelegd. Zie Layout aanpassen door van stylesheet te wisselen.
• Wijzig tegelijkertijd de actie en het bijschrift van de 'printer-link'. Zie bijvoorbeeld Buttontekst aanpassen
.
• Maak de voettekst zichtbaar.

• Het bovenstaande klinkt eenvoudig, maar vraagt wel enige toelichting. Raadpleeg in elk geval de pagina's achter bovengenoemde links.
• Zorg ervoor dat de popup "hoog genoeg" is. Dat bevordert de leesbaarheid. Hier is 70% van de beschikbare hoogte genomen.
• Zorg ervoor dat de popup "breed genoeg" is. Hier is 800 pixels gebruikt. Daardoor past de tekst goed in het window. Ook dat is goed voor de leesbaarheid.
• De popup wordt gecentreerd op het scherm gezet. Dat is een kwestie van smaak. In de linker bovenhoek is ook prima. Zorg er wel voor dat de popup helemaal op het scherm past.
   
• Er worden twee stylesheets gebruikt. Voor de 'normale' situatie is er bbstyles.css. Deze heeft title="Normaal". Voor de printervriendelijke versie wordt demostylec.css gebruikt. Deze heeft title="Print".
• De benodigde JavaScript functions staan in de file printdoc.js. Die hoef je alleen maar te linken, wijzigen is niet nodig.
   
• Als de pagina geheel geladen wordt de function KiesStyleSheet() uitgevoerd via onload. Deze function evalueert de querystring (dat is de tekst na het vraagteken in de filenaam).
  
  • Als de tekst PrinterWindow wordt aangetroffen, wordt demostylec.css geactiveerd. De voettekst wordt zichtbaar. De tekst "Printervriendelijke pagina" wordt veranderd in "Print document".
    Dit treedt op als de pagina in de popup wordt geopend.
  • Als de tekst PrinterWindow niet wordt aangetroffen, wordt bbstyles.css geactiveerd. Er hoeft verder niets gedaan te worden. Dit is de 'normale' situatie.
   
• Als er op het plaatje van de printer of op het bijschrift wordt geklikt, wordt de function PrintWindow() aangeroepen. Ook deze function evalueert de querystring.
  
  • Als de tekst PrinterWindow wordt aangetroffen, wordt de standaard function window.print() gestart. Op het scherm verschijnt de lijst met printers en de pagina kan worden afgedrukt. Dit gebeurt altijd vanuit de popup.
  • Als de tekst PrinterWindow niet wordt aangetroffen, wordt de popup met de printervriendelijke pagina gemaakt.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="bbstyles.css" title="Normaal">
<link rel="stylesheet" href="demostylec.css" title="Print">
<script src="printdoc.js"></script>

(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).

<p id="PrinterIcon">
  <img src="print-icon.gif" alt="" width="46" height="49" border="0"
    style="cursor:pointer; float:right; margin:0 0 10px 5px"
    title="Printervriendelijke pagina" onClick="PrintWindow()">
  <span id="PrintIconT" class="Opmerk-k" style="cursor:pointer;
    float:right; margin:10px 5px" onClick="PrintWindow()">
    Printervriendelijke pagina</span>
</p>

(Zet dit in de <BODY>, helemaal onderaan, dus vlak voor de </BODY>-tag).

<p id="VoetTekst" style="display:none;text-align:center">
  <img src="bbhead0.gif" alt="" width="420" height="38"
    border="0"><br>&nbsp;<br>
  https://home.hccnet.nl/s.f.boukes
  <img src="sluiten.gif" alt="" width="91" height="23" border="0"
    style="cursor:pointer; float:right" onClick="window.close()">
</p>

(neem dit attribuut op in de <BODY>-tag).

onload="KiesStyleSheet()"

Downloaden:
 
Druk op de knop:  File: voorb304.zip, 7752 bytes.