Så här lägger du till en tryckknapp på din webbsida

Annons

Du vet, något som att lägga till en tryckknapp på en webbsida låter ganska enkelt, eller hur? I själva verket, varför behöver vi till och med lägga till en tryckknapp eller länk till sidan alls, när allt läsaren måste göra är att klicka på "Fil”Och“Skriva ut…”I webbläsarmenyn?

I slutändan vill olika personer ha utskriftsfunktionen på deras webbsida av olika skäl. Du kanske bara vill lägga till bekvämlighet. När läsaren bara kan klicka på en knapp för att få en utskrift sparar det några klick och varje klick räknas. Andra människor vill anpassa den tryckta texten - dölj med andra ord vissa delar av sidan från utskriften. I andra situationer föredrar människor att skapa en noggrant anpassad, utskrivbar version av webbplatsen.

För var och en av dessa situationer finns det olika lösningar. Vi har alltid försökt erbjuda innovativa utskriftslösningar här på MUO, till exempel Justin's artikel om utskrift på halvsidor Spara papper genom att formatera och skriva ut dina filer med Govert's Imposition Tool [Windows]

Papper kostar pengar. Spara båda genom att skriva ut dina PDF-filer på halvsidor. Oavsett om du vill ha en broschyr eller kopiera sida vid sida, gör ett gratis verktyg för Windows inte bara detta möjligt utan också enkelt. Sluta larva dig... Läs mer och Karls artikel om PrintWhatYouLike Skriv utWhatYou - Spara papper och bläck när du skriver ut webbsidor Läs mer . I den här artikeln kommer jag att ge fyra sätt att du kan integrera en utskriftsknapp eller länk till din webbplats - från den mycket enkla HTML- och Javascript-metoden, till den mer anpassningsbara CSS närma sig.

Integrera utskrift på din webbplats

När du tittar på en webbsida är det ganska enkelt att se varför du kanske vill anpassa utskriften. En typisk webbsida har annonser, banners, annonslänkar, sidofält och sidfotsektioner som inte gör annat än att äta upp sidutrymme och slösa bort papper.

Om du har en ganska enkel webbplats eller om du inte riktigt bryr dig om alla grafik- och formateringsutskrifter eller inte, du måste göra är att lägga till en enkel knapp på din webbsida och använda "print ()" javascript-metoden för att skicka webbsidan till skrivaren.

Att placera den här koden på din webbplats på en plats som är snabb och enkel för dina läsare att använda ser ut så här.

Allt som läsaren behöver göra är att klicka på knappen och sidan skickas direkt till skrivaren utan någon formatering av sidan. Om sidan är längre än skrivarens bredd kan det vara möjligt att du kan skriva ut mycket fler sidor än vad som faktiskt är nödvändigt.

Vissa människor gillar inte riktigt utseendet på en formulärknapp, så som ett alternativ kan du helt enkelt använda en länk med det inbäddade javascript för att göra exakt samma sak.

Skriv ut den här sidan. 

Du kan se hur en enkel text i många fall ser mycket renare ut än en knapp men som du verkligen använder kommer ner till vilket ser bättre ut på det område på webbsidan där du vill tillhandahålla utskriften funktion.

Som du kan se från exemplet ovan, formateringen av många annonser och banners stämmer inte perfekt med webbläsarens display när du helt enkelt använder utskriftskommandot. Detta blir mycket tydligare för mer komplexa webbplatser. Ett annat tillvägagångssätt som människor använder är att blockera hela delar av webbplatsen med hjälp av CSS och tilldela specifika delar av sidan för att skriva ut. Du gör detta genom att först länka CSS-filen i rubrikavsnittet.

Därefter måste du skapa den faktiska CSS-filen och spara den i samma katalog som din webbsida. CSS-filen ska tilldela alla avsnitt på sidan som inte ska skrivas ut och sedan också göra elementen på sidan du tilldelar för att skriva ut som synliga.

DIV # header, DIV # newflash, DIV # banner {display: none;} kropp {synlighet: dold;} .print {synlighet: synlig;}

Nu när din CSS-fil är konfigurerad, behöver du bara gå igenom din sida och märka varje avsnitt med klassen "print".

Den här raden kommer att skrivas ut. 

Den här linjen kommer inte. 

Nu kan du se i utskriften där endast de delar av sidan som är markerade med klassen "print" skrivs ut på sidan och alla andra avsnitt inte. En svårighet med detta tillvägagångssätt är att du måste se till att stänga av skärmen för alla DIV-avsnitt som du inte vill skriva ut. Som ni kan se nedan har jag inte lagt till avsnittet "div" för Google-annonsen, så det är fortfarande tryckt.

Det kan ta lite tid att bygga CSS-filen och lägga klasserna korrekt. Om du verkligen inte vill bry dig om att göra detta på varje sida kan du välja en sista strategi. Detta är min favoritteknik för att tillhandahålla perfekt formaterade, utskrivbara versioner av webbsidan. Allt du behöver göra är att skapa en PDF-formaterad version av webbsidans innehåll, spara den på din webbhotell och sedan länka filen i sidhuvudet.

Det är allt du behöver göra! Du kan bädda in utskriftsknappen på din webbplats precis som i exemplen ovan, men istället för att CSS-filen laddas för utskriftsmetoden skickas PDF, DOC eller annan fil till skrivaren. Som du kan se nedan genererar detta den renaste utskrivbara versionen av din sida, och du kan i stort sett anpassa den så att den ser exakt ut hur du vill ha den.

Som du kan se finns det många alternativ att välja mellan när du vill placera en utskriftsknapp eller länk på din webbplats. Några av dessa val fungerar bra, men det rätta valet verkligen beror på hur komplex webbsidan är, och vilket innehåll du vill erbjuda dina läsare när de väljer att skriva ut din webbsida.

Har du provat någon av dessa tekniker för att lägga till en tryckknapp på en webbsida? Vilken teknik gillar du bäst? Har du några andra lösningar? Dela din insikt i kommentarerna nedan.

Bildkredit: Sundeip Arora