Slik legger du til en utskriftsknapp på websiden din

Du vet, noe som å legge til en utskriftsknapp til en webside høres ganske enkelt ut, ikke sant? Faktisk, hvorfor trenger vi til og med å legge til noen utskriftsknapp eller link til siden i det hele tatt, når alle leserne har å gjøre er å klikke på “Fil” og “Skrive ut… ” i nettlesermenyen?

I siste omgang vil forskjellige folk ha utskriftsfunksjonen på deres nettside av forskjellige grunner. Du vil kanskje bare legge til bekvemmelighet. Når leseren bare kan klikke på en knapp for å få en utskrift - det sparer noen få klikk, og hvert klikk teller. Andre mennesker vil tilpasse den utskrevne teksten - med andre ord skjule enkelte elementer på siden fra utskriften. I andre situasjoner foretrekker folk å lage en nøye tilpasset, utskrivbar versjon av nettstedet.

For hver av disse situasjonene er det forskjellige løsninger. Vi har alltid prøvd å tilby innovative utskriftsløsninger her på MUO, for eksempel Justins artikkel om utskrift på halvsidene Lagre papir ved å formatere og skrive ut filene dine med Govert's Impositionsverktøy [Windows] Lagre papir ved å formatere og skrive ut filene dine med Govert's Imposition Verktøy [Windows] Papir koster penger. Lagre begge ved å skrive ut PDF-ene dine på halvsidene. Enten du vil ha et hefte eller side om side, gjør et gratis verktøy for Windows ikke bare dette, men også enkelt. Stopp rote rundt ... Les mer og Karls artikkel om PrintWhatYouLike PrintWhatYouLike-lagre papir og blekk når du skriver ut nettsider PrintWhatYouLike- Lagre papir og blekk når du skriver ut nettsider Les mer. I denne artikkelen skal jeg gi fire måter du kan integrere en utskriftsknapp eller lenke inn på nettstedet ditt - fra den enkle HTML- og Javascript-tilnærmingen til den mer tilpassbare CSS-tilnærmingen.

Integrering av utskrift til ditt nettsted

Når du ser på en nettside, er det ganske enkelt å se hvorfor du kanskje vil tilpasse utskriften. En typisk nettside har annonser, bannere, annonseforbindelser, sidebars og bunntekstseksjoner som ikke gjør noe mer enn å spise opp sideplass og kaste bort avfall.

Hvis du har en ganske enkel nettside, eller du ikke bryr deg om alt grafikk og formatering skrives ut, er alt du trenger å gjøre, å legge til en enkel knapp på nettsiden din og bruke “skrive ut()” javascript-metode for å sende nettsiden til skriveren.

Plassering av denne koden på nettstedet ditt på et sted som er raskt og enkelt for leserne å bruke ser noe ut som dette.

Alt leseren må gjøre er å klikke på knappen og siden vil bli sendt direkte til skriveren uten noen formatering av sidene. Hvis siden ligger utenfor utskriftsbredden for skriveren, er det mulig at du kan ende opp med å skrive ut langt flere sider enn det egentlig er nødvendig.

Noen mennesker liker egentlig ikke utseendet på en skjema-knapp, så som et alternativ kan du bare bruke en kobling med det innebygde javascript for å gjøre nøyaktig det samme.

 Skriv ut denne siden 

Du kan se hvordan en enkel tekst i mange tilfeller ser mye renere ut enn en knapp, men som du bruker, kommer egentlig til å se bedre ut i området på nettsiden der du vil gi utskriftsfunksjonen.

Som du kan se fra eksempelutskriftet ovenfor, passer ikke formateringen av mange annonser og bannere perfekt til nettleservisningen når du bare bruker utskriftskommandoen. Dette blir mye mer tydelig for mer komplekse nettsteder. En annen tilnærming folk bruker, er å blokkere hele seksjoner av nettstedet ved hjelp av CSS, og tilordne bestemte deler av siden som skal skrives ut. Du gjør dette ved først å koble CSS-filen i overskriftsdelen.

Deretter må du opprette den faktiske CSS-filen og lagre den i samme katalog som din nettside. CSS-filen skal tilordne alle sidene på siden som ikke skal skrives ut, og deretter også elementene på siden du tilordner å skrive ut som synlig.

 DIV # header, DIV # newflash, DIV # banner display: none; kropp synlighet: skjult; .print synlighet: synlig; 

Nå som CSS-filen din er satt opp, er alt du trenger å gjøre, gå gjennom siden din og tag hver seksjon med “skrive ut” klasse.

  Denne linjen vil bli skrevet ut. Denne linjen vil ikke.  

Nå kan du se i utskriften hvor bare de seksjonene på siden som er merket med “skrive ut” Klassen blir trykt på siden, og alle andre seksjoner gjør det ikke. Den ene vanskeligheten med denne tilnærmingen er at du må sørge for å slå av skjermen for alle DIV-seksjoner som du ikke vil skrive ut. Som du kan se nedenfor, har jeg ikke lagt til “div” delen for Google-annonsen, slik at den fortsatt skrives ut.

Det kan ta litt tid å bygge CSS-filen og legge ut klassene riktig. Hvis du virkelig ikke vil bry deg om dette på hver side, kan du velge en siste tilnærming. Dette er min favorittteknikk for å gi perfekt formaterte, utskrivbare versjoner av nettsiden. Alt du trenger å gjøre er å opprette en PDF-formatert versjon av nettsidens innhold, lagre det på webverten din, og koble deretter filen i overskriften til siden.

Det er alt du trenger å gjøre! Du kan legge inn utskriftsknappen på nettstedet ditt som i eksemplene ovenfor, men i stedet for CSS-filen lastet for utskriftsmetoden, sendes PDF, DOC eller annen fil til skriveren. Som du ser nedenfor genererer dette den reneste utskrivbare versjonen av siden din, og du kan ganske enkelt tilpasse den for å se nøyaktig hvordan du vil ha det.

Som du kan se, er det mange alternativer å velge mellom når du vil plassere en utskriftsknapp eller link på nettsiden din. Noen av disse valgene fungerer bra, men det riktige valget kommer egentlig ned til hvor komplisert nettsiden er, og hvilket innhold du vil tilby leserne når de velger å skrive ut nettsiden din.

Har du prøvd noen av disse teknikkene for å legge til en utskriftsknapp på en nettside? Hvilken teknikk liker du best? Har du andre løsninger? Del innsiktet ditt i kommentarfeltet nedenfor.

Bilde Kreditt: Sundeip Arora

Utforsk mer om: Utskrift, webutvikling, verktøy for nettredaktører.