Kuinka lisätä painatuspainike verkkosivullesi

Mainos

Tiedätkö, että esimerkiksi tulostuspainikkeen lisääminen verkkosivulle kuulostaa melko yksinkertaiselta, eikö niin? Itse asiassa miksi meidän on jopa lisättävä kaikki painikkeet tai linkit sivulle ollenkaan, kun lukijan on tehtävä vain napsauttaa “tiedosto”Ja“Tulosta…”Selainvalikossa?

Viime kädessä eri ihmiset haluavat tulostusominaisuuden verkkosivustollean eri syistä. Haluat ehkä lisätä mukavuutta. Kun lukija voi napsauttaa vain painiketta saadaksesi tulosteen - se tallentaa muutaman napsautuksen, ja jokainen napsautus lasketaan. Muut ihmiset haluavat mukauttaa tulostettua tekstiä - toisin sanoen piilottaa tietyt sivun osat tulosteesta. Muissa tilanteissa ihmiset mieluummin luovat huolellisesti räätälöityjä, tulostettavia verkkosivuja.

Jokaiselle näistä tilanteista on erilaisia ​​ratkaisuja. Olemme aina yrittäneet tarjota innovatiivisia tulostusratkaisuja täällä MUOssa, kuten Justinin artikkeli aiheesta tulostaminen puolisivuille Säästä paperia muotoilemalla ja tulostamalla tiedostosi Govertin Imposition-työkalulla [Windows]

Paperi maksaa rahaa. Säästä molemmat tulostamalla PDF-tiedostot puolisivuille. Haluatpa kirjasen tai rinnakkaiskopioita, ilmainen Windows-työkalu tekee tämän mahdolliseksi myös yksinkertaisen. Lopeta sotku ... Lue lisää ja Karlin artikkeli aiheesta PrintWhatYouLike PrintWhatYouLike - Tallenna paperi ja muste tulostaessasi verkkosivuja Lue lisää . Tässä artikkelissa aion tarjota neljä tapaa integroida tulostuspainike tai linkki siihen verkkosivustollesi - hyvin yksinkertaisesta HTML- ja Javascript-lähestymistavasta aina muokattavissa olevaan CSS: ään lähestyä.

Tulostamisen integrointi verkkosivustoosi

Kun tarkastelet mitä tahansa verkkosivua, on melko helppoa nähdä, miksi haluat ehkä mukauttaa tulostusta. Tyypillisellä verkkosivulla on mainoksia, bannereita, mainoslinkkejä, sivupalkkeja ja alatunnisteosia, jotka eivät muuta kuin vie sivutilaa ja kuluttavat tuhlaasti paperia.

Jos sinulla on melko yksinkertainen verkkosivusto tai et välitä siitä, tulostavatko kaikki grafiikat ja muotoilut, kaikki sinun on lisättävä yksinkertainen painike verkkosivullesi ja lähetettävä verkkosivu tulostimeen käyttämällä ”print ()” javascript-menetelmää.

Tämän koodin sijoittaminen sivustoosi sijaintiin, jota lukijoiden on nopea ja helppo käyttää, näyttää tällaiselta.

Lukijan on tehtävä vain napsauttaa painiketta ja sivu lähetetään suoraan tulostimeen ilman sivun muotoilua. Jos sivu ylittää tulostimen tulostettavan leveyden, on mahdollista, että tulostat paljon enemmän sivuja kuin on todella tarpeen.

Jotkut ihmiset eivät todellakaan pidä lomakepainikkeen ulkonäöstä, joten vaihtoehtona voit käyttää linkkiä upotetun javascriptin kanssa tehdäksesi saman asian.

Tulosta tämä sivu. 

Voit nähdä, kuinka monissa tapauksissa yksinkertainen teksti näyttää paljon puhtaammalta kuin painikkeelta, mutta jota käytät todella tulee alas, mikä näyttää paremmalta sillä verkkosivun alueella, jolle haluat antaa tulosteen ominaisuus.

Kuten yllä olevasta esimerkistä voi nähdä, monien mainosten ja bannerien muotoilu ei vastaa täysin selaimen näyttöä, kun käytät vain tulostuskomentoa. Tämä käy paljon ilmeisemmäksi monimutkaisemmille verkkosivustoille. Toinen lähestymistapa, jota ihmiset käyttävät, on estää verkkosivuston kokonaiset osiot CSS: n avulla ja määrittää tietyt sivun osiot tulostettavaksi. Voit tehdä tämän linkittämällä ensin CSS-tiedoston otsikko-osioon.

Seuraavaksi sinun on luotava todellinen CSS-tiedosto ja tallennettava se samaan hakemistoon kuin verkkosivusi. CSS-tiedoston tulisi määrittää kaikki sivun osat, joita ei tule tulostaa, ja tehdä sitten myös tulostettavan sivun osat näkyväksi.

DIV # otsikko, DIV # newflash, DIV # banneri {näyttö: ei mitään;} runko {näkyvyys: piilotettu;} .print {näkyvyys: näkyvä;}

Nyt kun CSS-tiedostosi on asennettu, sinun tarvitsee vain käydä läpi sivusi ja merkitä jokainen osa ”print” -luokkaan.

Tämä rivi tulostetaan. 

Tämä linja ei tule. 

Nyt voit nähdä tulostuksessa, että vain ”print” -luokalla merkityt sivun osat tulostetaan sivulle, eikä kaikkia muita osioita. Yksi ongelma tässä lähestymistavassa on, että sinun on varmistettava, että sammutat näytön kaikista DIV-osioista, joita et halua tulostaa. Kuten alla voit nähdä, en lisännyt Google-mainoksen div-osiota, joten tulostettiin edelleen.

CSS-tiedoston luominen ja luokkien asettaminen oikein voi viedä jonkin aikaa. Jos et todella halua häiritä tekemällä tätä jokaisella sivulla, voit valita yhden viimeisen lähestymistavan. Tämä on suosikkini tekniikalla verkkosivun täydellisesti muotoiltujen, tulostettavien versioiden tarjoamiseksi. Ainoa mitä sinun on tehtävä, on luoda PDF-muodossa versio verkkosivun sisällöstä, tallentaa se Web-isäntään ja linkittää tiedosto sitten sivun otsikkoon.

Se on kaikki mitä sinun täytyy tehdä! Voit upottaa tulostuspainikkeen sivustollesi kuten yllä olevissa esimerkeissä, mutta tulostustapaa varten ladatun CSS-tiedoston sijasta PDF, DOC tai muu tiedosto lähetetään tulostimeen. Kuten alla näet, tämä luo sivusi puhtain tulostettavan version, ja voit mukauttaa sen näyttämään täsmälleen miltä haluat.

Kuten näette, on paljon vaihtoehtoja, joista valita, kun haluat asettaa tulostuspainikkeen tai linkin verkkosivullesi. Mikä tahansa näistä vaihtoehdoista toimii hyvin, mutta oikea valinta päätyy todellakin siihen, kuinka monimutkainen verkkosivu on ja mitä sisältöä haluat tarjota lukijoillesi, kun he haluavat tulostaa verkkosivusi.

Oletko yrittänyt jotakin näistä tekniikoista lisätä tulostuspainike verkkosivulle? Mistä tekniikasta pidät parhaiten? Onko sinulla muita ratkaisuja? Jaa tietosi alla olevassa kommenttiosassa.

Kuvahyvitys: Sundeip Arora