Printen

Status
Niet open voor verdere reacties.
Helogat

Helogat

Gebruiker
Lid geworden
22 apr 2008
Berichten
808
Hallo, ik heb vijf vragen in een keer:

A: Hoe maak je een "Printen Knop"
B: Hoe zorg je ervoor dat die knop niet op de afdruk zichtbaar is
C:Hoe zorg je dat de achtergrond niet meegeprint wordt
D: Hoe zorg je dat de tekskleur van alle tekst zwart wordt
E: Hoe zorg je dat op de afdruk een rode balk boven komt met daarin: Helogat Huiswerker
 
prachtige printversie ...

Mooi, dat was vraagje A: nu de andere nog. Doen we ook maar in één keer. ;)
Het principe:
  • Je maakt een speciaal stylesheet dat automatisch gebruikt wordt op het moment dat iemand de printknop indrukt (of hetzelfde doet via het menu "Bestand" > "Afdrukken").
  • In de html zet je alles, zowel wat geprint als wat niet geprint moet worden.
  • Met css regel je wat wanneer gebruikt wordt.
In de head van je html-pagina (in deze volgorde!):
HTML: 
<link rel="stylesheet" type="text/css" 
   href="http://www.mijneigenwebsite.nl/stylesheets/standaard.css">
<link rel="stylesheet" type="text/css" media="print"
   href="http://www.mijneigenwebsite.nl/stylesheets/print.css">
En dan in de body:
HTML: 
<body>
<p id="rodeBalk">Helogat Huiswerker</p>

... rest van de pagina ...
... met ergens:

<form id="printknop">
... code van jettro ...
</form>

</body>
Met in de standaard.css:
Code: 
#rodeBalk { 
   display: none;
   visibility: hidden;
   }
en als print.css:
Code: 
body * {
   color: black !important; /* overal zwarte letters */
   background-color: white !important; /* zo blijven achtergrondplaatjes afgedrukt */
   background: white !important;       /* zo worden ook achtergrondplaatjes gesloopt! */   
   }
#printknop {
   display: none;
   visibility: hidden;
   }
#rodeBalk { 
   display: block;
   visibility: visible;
   background: red !important; /* ondanks alg. witte achtergrond */
   color: white !important;    /* ondanks alg. zwarte letters    */
   }
Op deze manier kan je ook hele menu's wegwerken in de printversie, of er een eigen kop met zwart-wit plaatje boven zetten, enz. enz.
  • Zo zit bv. deze pagina in elkaar:
    klik op "Bestand" > "Afdrukvoorbeeld", en je ziet wat er op het A4-tje komt dat geprint gaat worden.
Dat 'Afdrukvoorbeeld bekijken' kan je dus ook doen bij het testen van je pagina: hoef je niet steeds een velletje papier te offeren! :D

Succes,
CSShunter
 
Laatst bewerkt:
Ik heb geen printer, dus het moet wel met XPS Writer :P

maar het werkte niet helemaal, toch heb ik uiteindelijk het volgende eruit gekregen: *knip* werkte niet, zal zo wel even kijken
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan