Hoe een afdrukknop toevoegen aan uw webpagina

Weet je, zoiets als het toevoegen van een printknop aan een webpagina klinkt vrij eenvoudig, toch? Waarom zouden we zelfs een printknop of link naar de pagina moeten toevoegen, als het enige wat de lezer hoeft te doen is klikken op “het dossier” en “Afdrukken… ” in het browsermenu?

Uiteindelijk willen verschillende mensen de afdrukfunctie op hun webpagina om verschillende redenen. Misschien wilt u gewoon gemak toevoegen. Wanneer de lezer op een knop kan klikken om een ​​afdruk te krijgen - het bespaart een paar klikken en elke klik telt. Andere mensen willen de afgedrukte tekst aanpassen - met andere woorden, verberg bepaalde elementen van de pagina uit de afdruk. In andere situaties geven mensen er de voorkeur aan om een ​​zorgvuldig aangepaste, afdrukbare versie van de website te maken.

Voor elk van deze situaties zijn er verschillende oplossingen. We hebben altijd geprobeerd om innovatieve afdrukoplossingen aan te bieden op MUO, zoals het artikel van Justin over afdrukken op halve pagina's. Papier besparen door te formatteren en uw bestanden te printen met Govits Imposition Tool [Windows] Papier besparen door uw bestanden op te maken en te bedrukken met de opmaak van Govert Gereedschap [Windows] Papier kost geld. Sla beide op door uw PDF's op halve pagina's af te drukken. Of u nu een boekje wilt of kopieën die naast elkaar staan, een gratis tool voor Windows maakt dit niet alleen mogelijk maar ook eenvoudig. Stop met rommelen ... Lees meer en Karl's artikel over PrintWhatYouLike PrintWhatYou Like- Bespaar papier en inkt bij het afdrukken van webpagina's PrintWhatYou Like- Bespaar papier en inkt bij het afdrukken van webpagina's Lees meer. In dit artikel ga ik vier manieren bieden waarop u een afdrukknop of een koppeling naar uw website kunt integreren - van de zeer eenvoudige HTML- en JavaScript-benadering tot de meer aanpasbare CSS-benadering.

Afdrukken op uw website integreren

Wanneer u naar een webpagina kijkt, is het vrij eenvoudig om te zien waarom u de afdruk wilt aanpassen. Een typische webpagina bevat advertenties, banners, advertentielinks, zijbalken en voetteksten die niets meer doen dan paginaruimte opeten en papier verspillen.

Als u een vrij eenvoudige website hebt, of u maakt niet echt uit of alle afbeeldingen en opmaak worden afgedrukt, dan hoeft u alleen maar een eenvoudige knop aan uw webpagina toe te voegen en de “afdrukken()” JavaScript-methode om de webpagina naar de printer te verzenden.

Het plaatsen van deze code op uw site op een locatie die snel en gemakkelijk door uw lezers kan worden gebruikt, ziet er ongeveer zo uit.

De lezer hoeft alleen maar op de knop te klikken en de pagina wordt rechtstreeks naar de printer verzonden zonder enige vorm van pagina-indeling. Als de pagina buiten de afdrukbreedte voor de printer valt, kunt u mogelijk veel meer pagina's afdrukken dan nodig is.

Sommige mensen houden niet echt van het uiterlijk van een formulierknop, dus als alternatief kunt u eenvoudig een link gebruiken met het ingesloten JavaScript om exact hetzelfde te doen.

 Print deze pagina 

U kunt zien hoe in veel gevallen een eenvoudige tekst er veel schoner uitziet dan een knop, maar die u echt gebruikt waar het er beter uitziet in het gebied van de webpagina waar u de afdrukfunctie wilt aanbieden.

Zoals u kunt zien aan de hand van de bovenstaande voorbeeldafdruk, komen de opmaak van veel advertenties en banners niet perfect overeen met de browserdisplay wanneer u eenvoudig de afdrukopdracht gebruikt. Dit wordt veel duidelijker voor complexere websites. Een andere benadering die mensen gebruiken, is om hele delen van de website te blokkeren met behulp van CSS en specifieke delen van de pagina toe te wijzen om te worden afgedrukt. Dit doet u door eerst het CSS-bestand in het kopgedeelte te linken.

Vervolgens moet u het eigenlijke CSS-bestand maken en opslaan in dezelfde map als uw webpagina. Het CSS-bestand moet alle secties van de pagina die niet moet worden afgedrukt, toewijzen en vervolgens ook de elementen van de pagina die u toewijst afdrukken als zichtbaar.

 DIV # header, DIV # newflash, DIV # banner display: none; body visibility: hidden; .print visibility: visible; 

Nu uw CSS-bestand is ingesteld, hoeft u alleen maar uw pagina te doorlopen en elke sectie te taggen met de “afdrukken” klasse.

  Deze regel wordt afgedrukt. Deze regel zal niet.  

Nu kunt u op de afdruk zien waar alleen de secties van de pagina gemarkeerd zijn met de “afdrukken” klasse wordt afgedrukt op de pagina en alle andere secties niet. De enige moeilijkheid met deze benadering is dat je ervoor moet zorgen dat het display wordt uitgeschakeld voor alle DIV-secties die je niet wilt laten afdrukken. Zoals je hieronder kunt zien, heb ik het niet toegevoegd “div” sectie voor de Google-advertentie, zodat deze nog steeds wordt afgedrukt.

Het kan enige tijd duren om het CSS-bestand te maken en de klassen correct in te delen. Als je echt niet wilt dat je dit op elke pagina doet, dan kun je kiezen voor een laatste benadering. Dit is mijn favoriete techniek voor het maken van perfect opgemaakte, afdrukbare versies van de webpagina. Het enige wat u hoeft te doen is een PDF-geformatteerde versie van de webpagina-inhoud maken, deze opslaan op uw webhost en vervolgens het bestand in de kop van de pagina linken..

Dat is alles wat u hoeft te doen! U kunt de afdrukknop op uw site insluiten, net als in de bovenstaande voorbeelden, maar in plaats van het CSS-bestand dat is geladen voor de afdrukmethode, wordt het PDF-, DOC- of ander bestand naar de printer gestuurd. Zoals u hieronder kunt zien, genereert dit de schoonste afdrukbare versie van uw pagina, en u kunt het vrijwel aanpassen zodat het er precies uitziet zoals u het wilt..

Zoals u kunt zien, zijn er tal van opties om uit te kiezen wanneer u een printknop of link op uw webpagina wilt plaatsen. Elk van deze keuzes werkt goed, maar de juiste keuze komt in feite neer op hoe ingewikkeld de webpagina is en welke inhoud u uw lezers wilt aanbieden wanneer ze uw webpagina willen afdrukken..

Heb je een van deze technieken geprobeerd om een ​​afdrukknop aan een webpagina toe te voegen? Welke techniek vind je het leukst? Heeft u andere oplossingen? Deel uw inzichten in de opmerkingen hieronder.

Image Credit: Sundeip Arora

Meer informatie over: Afdrukken, Webontwikkeling, Webmasterhulpprogramma's.