Sådan føjes en udskrivningsknap til din webside

Reklame

Du ved, noget som at føje en udskrivningsknap til en webside lyder ret simpelt, ikke? Faktisk hvorfor har vi endda brug for at tilføje en hvilken som helst udskrivningsknap eller et link til siden overhovedet, når alt læseren skal gøre er at klikke på “Fil”Og“Print…”I browsermenuen?

I sidste ende ønsker forskellige mennesker udskrivningsfunktionen på deres webside af forskellige grunde. Du ønsker måske bare at tilføje bekvemmelighed. Når læseren bare kan klikke på en knap for at få en udskrift - det gemmer et par klik, og hvert klik tæller. Andre mennesker vil tilpasse den udskrevne tekst - med andre ord skjule visse elementer på siden fra udskriften. I andre situationer foretrækker folk at oprette en nøje tilpasset, udskrivbar version af webstedet.

I hver af disse situationer er der forskellige løsninger. Vi har altid forsøgt at tilbyde innovative printløsninger her på MUO, som Justin's artikel om udskrivning på halvsider Gem papir ved formatering og udskrivning af dine filer med Govert's imponeringsværktøj [Windows]

Papir koster penge. Gem begge dele ved at udskrive dine PDF-filer på halvsider. Uanset om du vil have en pjece eller side om side-kopier, gør et gratis værktøj til Windows ikke kun dette muligt, men også enkelt. Stop med at rode rundt ... Læs mere og Karls artikel om PrintWhatYouLike UdskrivWhatYG - Gem papir og blæk, når du udskriver websider Læs mere . I denne artikel vil jeg give fire måder, du kan integrere en udskrivningsknap eller link i dit websted - fra den meget enkle HTML- og Javascript-tilgang til den mere tilpassede CSS nærme sig.

Integrering af udskrivning på dit websted

Når du ser på en webside, er det temmelig let at se, hvorfor du måske ønsker at tilpasse udskriften. En typisk webside har annoncer, bannere, annoncelinks, sidebjælker og sidefodsektioner, der ikke gør andet end at spise siderum og spildt forbruge papir.

Hvis du har et temmelig enkelt websted, eller du ikke ligeglad med, om al grafik og formatering udskrives eller ej, så er alle du skal gøre er at tilføje en simpel knap til din webside og bruge "print ()" javascript-metoden til at sende hjemmesiden til printeren.

At placere denne kode på dit sted på et sted, der er hurtigt og let for dine læsere at bruge, ser sådan ud.

Alt, hvad læseren skal gøre, er at klikke på knappen, og siden sendes direkte til printeren uden nogen formatering af siden. Hvis siden er længere end printerens udskrivbare bredde, er det muligt, at du kan ende med at udskrive langt flere sider, end det faktisk er nødvendigt.

Nogle mennesker kan ikke rigtig lide udseendet af en formknap, så som et alternativ kan du blot bruge et link med det indlejrede javascript til at gøre nøjagtigt det samme.

Udskriv denne side. 

Du kan se, hvordan en simpel tekst i mange tilfælde ser meget renere ud end en knap, men som du virkelig bruger kommer ned, som ser bedre ud på det område af websiden, hvor du vil udskrive udskriften funktion.

Som du kan se fra eksemplet på udskriften ovenfor, stemmer formateringen af ​​mange annoncer og bannere ikke perfekt sammen med browserdisplayet, når du blot bruger printkommandoen. Dette bliver meget mere synligt for mere komplekse websteder. En anden tilgang, som folk bruger, er at blokere hele sektioner på webstedet ved hjælp af CSS og tildele bestemte sektioner på siden til udskrivning. Du gør dette ved først at linke CSS-filen i overskriftsafsnittet.

Dernæst skal du oprette den egentlige CSS-fil og gemme den i det samme bibliotek som din webside. CSS-filen skal tildele alle sektioner på siden, der ikke skal udskrives, og derefter også gøre elementerne på den side, du tildeler, til at udskrive som synlige.

DIV # header, DIV # newflash, DIV # banner {display: none;} krop {synlighed: skjult;} .print {synlighed: synlig;}

Nu, hvor din CSS-fil er konfigureret, er alt hvad du skal gøre at gå gennem din side og mærke hvert afsnit med klassen "print".

Denne linje udskrives. 

Denne linje vil det ikke. 

Nu kan du se i udskriften, hvor kun de sektioner på siden, der er markeret med klassen "print", bliver udskrevet på siden, og alle andre sektioner ikke. Den ene vanskelighed med denne tilgang er, at du skal sørge for at slukke for skærmen for alle DIV-sektioner, som du ikke ønsker at blive udskrevet. Som du kan se nedenfor, tilføjede jeg ikke afsnittet “div” til Google Annonce, så det stadig udskrives.

Det kan tage lidt tid at opbygge CSS-filen og placere klasserne korrekt. Hvis du virkelig ikke ønsker at gider med at gøre dette på hver side, kan du vælge en sidste tilgang. Dette er min foretrukne teknik til at levere perfekt formaterede, udskrivbare versioner af websiden. Alt hvad du skal gøre er at oprette en PDF-formateret version af websidens indhold, gemme den på din webhost og derefter linke filen i overskriften på siden.

Det er alt hvad du skal gøre! Du kan integrere udskrivningsknappen på dit websted, ligesom i eksemplerne ovenfor, men i stedet for den CSS-fil, der er indlæst til udskrivningsmetoden, sendes PDF, DOC eller anden fil til printeren. Som du kan se nedenfor, genererer dette den reneste udskrivbare version af din side, og du kan stort set tilpasse den til at se nøjagtigt, hvordan du vil have den.

Som du kan se, er der masser af muligheder at vælge imellem, når du vil placere en udskrivningsknapp eller -link på din webside. Et af disse valg fungerer godt, men det rigtige valg kommer virkelig ned på, hvor kompliceret hjemmesiden er, og hvilket indhold du vil tilbyde dine læsere, når de vælger at udskrive din webside.

Har du prøvet nogen af ​​disse teknikker for at føje en udskrivningsknap til en webside? Hvilken teknik kan du lide bedst? Har du andre løsninger? Del din indsigt i kommentarfeltet nedenfor.

Billedkredit: Sundeip Arora