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

Du vet att något som att lägga till en utskriftsknapp till en webbsida låter ganska enkelt, eller hur? Faktum är att varför behöver vi till och med lägga till någon utskriftsknapp eller länk till sidan, när alla läsare måste göra klickar du på “Fil” och “Skriva ut… ” i webbläsarmenyn?

I slutändan vill olika personer ha utskriftsfunktionen på deras hemsida 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 - det sparar några klick och varje klick räknas. Andra människor vill anpassa den tryckta texten - med andra ord gömma 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 olika lösningar. Vi har alltid försökt att erbjuda innovativa utskriftslösningar här på MUO, som Justins artikel om utskrift på halvsidor Spara papper genom att formatera och skriva ut dina filer med Govert's Impositionsverktyg [Windows] Spara papper genom att formatera och skriva ut dina filer med Govert's Imposition Verktyg [Windows] Papper kostar pengar. Spara både genom att skriva ut dina PDF-filer på halvsidor. Oavsett om du vill ha ett häfte eller kopior sida vid sida, gör ett gratis verktyg för Windows inte bara detta, men också enkelt. Sluta röra runt ... Läs mer och Karls artikel om PrintWhatYouLike PrintWhatYouLike-Spara papper och bläck när du skriver ut webbsidor Skriv utWhatYouLike- 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 det mycket enkla HTML- och Javascript-tillvägagångssättet, till den mer anpassningsbara CSS-metoden.

Integrering av utskrift till din webbplats

När du tittar på en webbsida är det ganska lätt att se varför du kanske vill anpassa utskrift. En typisk webbsida har annonser, banderoller, annonslänkar, sidfält och sidfotar som inte gör något annat än att äta upp sidorum och slösa bort papper.

Om du har en ganska enkel webbplats, eller om du inte bryr dig om huruvida all grafik och formatering skrivs ut eller inte, så behöver du bara lägga till en enkel knapp på din webbsida och använda “skriva ut()” javascript-metod för att skicka webbsidan till skrivaren.

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

Allt läsaren måste göra är att klicka på knappen och sidan kommer att skickas direkt till skrivaren utan någon formatering av sidorna. Om sidan är bortom skrivbar bredd för skrivaren är det möjligt att du kan skriva ut långt fler sidor än vad som verkligen behövs.

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 vilken du använder verkligen kommer ner som ser bättre ut i området på webbsidan där du vill ge utskriftsfunktionen.

Som du kan se från exemplet utskrift ovan matchar formateringen av många annonser och banners inte perfekt i 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 folk använder är att blockera hela sektionerna av webbplatsen med hjälp av CSS och tilldela specifika delar av sidan som ska skrivas ut. Du gör det genom att länka först 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 sektioner av sidan som inte ska skrivas ut och sedan även göra elementen på sidan du tilldelar skriva ut som synliga.

 DIV # header, DIV # newflash, DIV # banner display: none; body visibility: hidden; .print sikt: synlig; 

Nu när din CSS-fil är konfigurerad är allt du behöver göra genom att gå igenom din sida och märka varje avsnitt med “skriva ut” klass.

  Denna rad kommer att skrivas ut. Denna linje kommer inte att.  

Nu kan du se i utskriften där endast de sektioner på sidan som är markerade med “skriva ut” klassen skrivs ut på sidan, och alla andra avsnitt gör det inte. Den enda svårigheten med detta tillvägagångssätt är att du måste se till att du stänger av skärmen för alla DIV-sektioner som du inte vill skriva ut. Som du kan se nedan lade jag inte till “div” avsnittet för Google Annonsen, så det fortfarande skrivs ut.

Det kan ta lite tid att bygga CSS-filen och lägga ut klasserna korrekt. Om du verkligen inte vill göra det här på varje sida, kan du välja en sista tillvägagångssätt. Detta är min favoritteknik för att ge perfekt formaterade, utskrivbara versioner av webbsidan. Allt du behöver göra är att skapa en PDF-formaterad version av webbsidans innehåll, spara det på din webbhotell, och länka sedan filen i sidans sidhuvud.

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

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 webbsida. Några av dessa val fungerar bra, men det rätta valet kommer verkligen ner till hur komplex webbsidan är och vilken 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 utskriftsknapp på en webbsida? Vilken teknik gillar du bäst? Har du några andra lösningar? Dela din insikt i kommentarfältet nedan.

Bildkrediter: Sundeip Arora

Utforska mer om: Utskrift, webbutveckling, verktyg för webbansvariga.