Cum să adăugați un buton de imprimare pe pagina dvs. web

Publicitate

Știi, ceva precum adăugarea unui buton de imprimare la o pagină web sună destul de simplu, nu? De fapt, de ce trebuie chiar să adăugăm orice buton de imprimare sau link la pagină, când tot ce trebuie să facă este cititorul faceți clic pe „Fişier" și "Imprimare…”În meniul browserului?

În cele din urmă, diferite persoane doresc funcția de imprimare pe pagina lor web din diferite motive. Poate doriți doar să adăugați comoditate. Când cititorul poate face doar clic pe un buton pentru a obține o tipărire - economisește câteva clicuri și fiecare clic contează. Alți oameni doresc să personalizeze textul tipărit - cu alte cuvinte, ascunde anumite elemente ale paginii din tipar. În alte situații, oamenii preferă să creeze o versiune de imprimare personalizată, atentă a site-ului.

Pentru fiecare dintre aceste situații, există soluții diferite. Am încercat întotdeauna să oferim soluții de imprimare inovatoare aici la MUO, cum ar fi articolul despre Justin tipărirea pe jumătate de pagină Salvați hârtia Formatând și imprimând fișierele cu instrumentul de impunere Govert [Windows]

Hârtia costă bani. Salvați ambele imprimând PDF-urile dvs. pe jumătate de pagină. Indiferent dacă doriți o broșură sau copii alături, un instrument gratuit pentru Windows nu numai că este posibil, ci și simplu. Nu te mai prosti... Citeste mai mult și articolul lui Karl pe PrintWhatYouLike PrintWhatYouLike- Salvați hârtie și cerneală atunci când imprimați pagini web Citeste mai mult . În acest articol, voi oferi patru modalități prin care puteți integra un buton de imprimare sau un link site-ul dvs. web - de la abordarea HTML și Javascript foarte simplă, la CSS mai personalizabil abordare.

Integrarea imprimării în site-ul dvs. web

Când te uiți la orice pagină web, este destul de ușor să vezi de ce este posibil să vrei să personalizezi tipărirea. O pagină web tipică are anunțuri, bannere, link-uri publicitare, bare laterale și secțiuni de subsol, care nu fac altceva decât să mănânce spațiul paginii și să consume consumul de hârtie.

Dacă aveți un site web destul de simplu sau nu vă pasă cu adevărat dacă toate graficele și imprimările de formatare sunt sau nu, atunci toate trebuie să faceți este să adăugați un buton simplu pe pagina dvs. web și să folosiți metoda javascript „print ()” pentru a trimite pagina web la imprimantă.

Plasarea acestui cod pe site-ul dvs. într-o locație care să le utilizeze rapid și ușor cititorilor dvs. arată așa ceva.

Tot ce trebuie să facă este să facă clic pe buton, iar pagina va fi trimisă direct la imprimantă, fără să formateze vreo pagină. Dacă pagina depășește lățimea de imprimare a imprimantei, este posibil să puteți termina prin imprimarea mult mai multor pagini decât este necesar.

Unora nu le place foarte mult apariția unui buton de formular, așa că, ca alternativă, puteți utiliza pur și simplu o legătură cu javascriptul încorporat pentru a face exact același lucru.

Imprimă această pagină. 

Puteți vedea cum, în multe cazuri, un text simplu pare mult mai curat decât un buton, dar pe care îl utilizați cu adevărat se referă la aspectul mai bun în zona paginii web unde doriți să furnizați tipărirea caracteristică.

După cum vedeți din exemplarul de mai sus, formatarea multor reclame și bannere nu se potrivește perfect cu afișarea browserului atunci când utilizați pur și simplu comanda de imprimare. Acest lucru devine mult mai evident pentru site-urile web mai complexe. O altă abordare pe care oamenii o folosesc este să blocheze secțiuni întregi ale site-ului web folosind CSS și să aloce secțiuni specifice ale paginii pentru imprimare. Faceți acest lucru mai întâi legând fișierul CSS în secțiunea antet.

În continuare, va trebui să creați fișierul CSS real și să îl salvați în același director ca și pagina dvs. web. Fișierul CSS ar trebui să atribuie toate secțiunile paginii care nu ar trebui să fie tipărite, și apoi să facă ca elementele din pagina pe care o atribuiți să fie tipărite ca fiind vizibile.

DIV # antet, DIV # newflash, DIV # banner {display: none;} body {vizibilitate: ascuns;} .print {vizibilitate: vizibilă;}

Acum că fișierul dvs. CSS este configurat, tot ce trebuie să faceți este să parcurgeți pagina și să etichetați fiecare secțiune cu clasa „print”.

Această linie va fi tipărită. 

Această linie nu va. 

Acum puteți vedea în tipărit unde numai secțiunile paginii marcate cu clasa „print” se imprimă pe pagină și toate celelalte secțiuni nu. Singura dificultate în această abordare este că trebuie să vă asigurați să opriți afișajul pentru toate secțiunile DIV pe care nu doriți să le imprimați. După cum puteți vedea mai jos, nu am adăugat secțiunea „div” pentru anunțul Google, astfel încât aceasta să fie încă tipărită.

Poate dura ceva timp pentru a construi fișierul CSS și a stabili corect clasele. Dacă într-adevăr nu doriți să faceți asta în fiecare pagină, atunci puteți opta pentru o ultimă abordare. Aceasta este tehnica mea preferată pentru furnizarea de versiuni de imprimat perfect formatate, ale paginii web. Tot ce trebuie să faceți este să creați o versiune PDF formatată a conținutului paginii web, să o salvați pe gazda dvs. web, apoi să legați fișierul în antetul paginii.

Asta trebuie doar să faci! Puteți încorpora butonul de imprimare pe site-ul dvs. la fel ca în exemplele de mai sus, dar în loc de fișierul CSS încărcat pentru metoda de imprimare, PDF, DOC sau alt fișier este trimis imprimantei. După cum puteți vedea mai jos, aceasta generează cea mai curată versiune de imprimare a paginii dvs. și puteți să o personalizați pentru a arăta exact cum doriți.

După cum puteți vedea, există o mulțime de opțiuni din care să alegeți când doriți să plasați un buton de imprimare sau un link pe pagina dvs. web. Oricare dintre aceste opțiuni funcționează bine, dar alegerea potrivită se rezumă într-adevăr la cât de complexă este pagina web și la ce conținut doriți să le oferiți cititorilor dvs. atunci când aleg să vă imprima pagina web.

Ați încercat vreuna dintre aceste tehnici pentru a adăuga un buton de imprimare pe o pagină web? Ce tehnică îți place cel mai bine? Aveți alte soluții? Împărtășiți informațiile dvs. în secțiunea de comentarii de mai jos.

Credit imagine: Sundeip Arora