Søg
Avatar billede hoejgaard Juniormester
24. april 2008 - 12:46 Der er 26 kommentarer og
3 løsninger

Print af side

Hej
Jeg skal have lavet en funktion som man ser på mange sider, hvor man ved at klikke på et print link på siden, kan printe indholdet af den pågældende tekst ud. Hvordan er det man laver det ??
Avatar billede fennec Nybegynder
24. april 2008 - 12:56 #1
Tænker du på:
<a href="#" onclick="window.print()">Print</a>
Avatar billede hoejgaard Juniormester
24. april 2008 - 13:01 #2
ja måske, ved ikke lige om den printer hele vinduet ud. Vil gerne ha at det det kun er en bestemt del af siden der printes ud, dvs tekstdelen og ikke menu osv..
Avatar billede 44fire44 Nybegynder
24. april 2008 - 13:06 #3
du kunne løse problemet ved at lave en knap hvor der står "printvenlig side" på - den koder du så uden menuen osv så det kun er teksten som er der - så sætter du bare onload="window.print()" ind i <body>
Avatar billede fennec Nybegynder
24. april 2008 - 13:07 #4
Det er et ? om at sætte et print CSS:
<link rel="stylesheet" type="text/css" href="/printStyle.css" media="print">

I det angiver du så hvilke elementer du ikke vil vise ved at sætte display:none
.MenuClass{display:none;}
Avatar billede michael_stim Ekspert
24. april 2008 - 13:08 #5
Det du ikke vil have skal printes ud sætter du en "hidden" på.

<STYLE MEDIA=print>
.hidden {
    display: none;
}
</STYLE>

og så f ex:
<span class="hidden">
Det der ikke skal printes
</span>
Avatar billede fennec Nybegynder
24. april 2008 - 13:14 #6
Her har du et fuld eks:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style media="print" type="text/css">
.showScreenOnly{display:none;}
.showPrintOnly{display:block;}
</style>

<style media="screen" type="text/css">
.showScreenOnly{display:block;}
.showPrintOnly{display:none;}
</style>
</head>
<body>

<div class="showAllWays">Dette vises altid</div>
<div class="showScreenOnly">Dette vises kun på skærmen</div>
<div class="showPrintOnly">Dette vises kun på print</div>

</body>
</html>
Avatar billede fennec Nybegynder
24. april 2008 - 13:22 #7
Ahh. I forlængelse af michael_stim så glemte jeg lige en metode med multi class:

<style type="text/css">
.menu{background-Color:red;}
</style>

<style media="print" type="text/css">
.PrintHidden{display:none;}
</style>

<div class="menu PrintHidden">Dette vises kun på skærmen</div>

Hvis man ikke angiver et medium virker det på alle. Og man kan godt smide flere klasser på et element. Dermed kan man bare smide PrintHidden på alle de elementer, der ikke skal vises på print.
Avatar billede hoejgaard Juniormester
24. april 2008 - 14:13 #8
det i foreslår, er det så med sådan en printvenlig link til den side uden menu osv ??
Avatar billede fennec Nybegynder
24. april 2008 - 14:32 #9
Nej, det er det 44fire44 forslår. Det synes jeg personlig er en forkert måde, men der er vi alle jo så forskellig :o)

Jeg fortrækker CSS media metoden som michael_stim og jeg henviser til. Der "fjerner" CSS helt automatisk de ting du har sat ikke skal printes.
Avatar billede fennec Nybegynder
24. april 2008 - 14:35 #10
... Det gode ved CSS metode er desuden at det også virker hvis folk bare trykker Ctrl+P eller på Print knappen i browseren (altså ikke din print knap). En printervenlig knap virker kun hvis brugerne trykker på den, også skal man til at døje med popup vinduer, som bliver fanget af blokkere osv.
Avatar billede michael_stim Ekspert
24. april 2008 - 14:39 #11
Der er dog en fordel ved 44fire44's forslag. Hvis du f ex har din data i en tabel der er bredere end et A4 ark, så kan du omformatere til en smallere tabel i din printervenlige side.
Avatar billede michael_stim Ekspert
24. april 2008 - 14:40 #12
Men det kan selvf. også løses i din CSS. Du skal bare tænke på det.
Avatar billede hoejgaard Juniormester
23. maj 2008 - 14:24 #13
Jeg har nu prøvet med det her, men topbillede.gif kommmer stadig med på printet ?? :

<head>
  <style media="print" type="text/css">
  .PrintHidden{display:none;}
  </style>

  </head>

<table class="table2" cellspacing="0" cellpadding="0" class="menu PrintHidden">
              <tr>
                  <td width="60%" valign="top"><IMG class="IMG1" SRC="topbillede.gif"></td>
                                </tr>
        </table>
Avatar billede w13 Novice
23. maj 2008 - 14:26 #14
Har du et body-element, som du bare har udeladt i eksemplet, eller er det der slet ikke?
Avatar billede michael_stim Ekspert
23. maj 2008 - 14:32 #15
Og prøv at fjerne menu i:  class="menu PrintHidden">
Avatar billede hoejgaard Juniormester
23. maj 2008 - 14:50 #16
jeg har et body-element, og har prøvet at fjerne menu, men det bliver stadig printet ud, når jeg klikker på  udskriv i browseren ??
Avatar billede michael_stim Ekspert
23. maj 2008 - 14:52 #17
Prøv at sætte den i en div, span eller lignende.
Avatar billede hoejgaard Juniormester
23. maj 2008 - 15:18 #18
nu satte jeg den ind i selve cellen,og det virker, men så bliver det godt nok mange steder det skal sættes ind når man ikke kan gøre det i <table> :

<table class="table2" cellspacing="0" cellpadding="0">
              <tr>
                  <td width="60%" valign="top" class="PrintHidden"><IMG class="IMG1" SRC="topbillede.gif"></td>
                                </tr>
        </table>
Avatar billede w13 Novice
23. maj 2008 - 15:21 #19
Hvis du prøver på tabellen igen, men så bare retter display:none; til visibility:hidden; virker det så?
Avatar billede hoejgaard Juniormester
23. maj 2008 - 15:28 #20
nej det virker ikke i table men i cellen..
Avatar billede roenving Novice
24. maj 2008 - 13:00 #21
Hrm, dette virker ganske udmærket ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>@print test</title>
<meta name="keywords" content="søgeord adskilt af komma">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
@media print{
  .PrintHidden{display:none;}
}
</style>
</head>
<body>
Vist både på skærm og på print
<table class="PrintHidden">
  <tr>
    <td>Tabelindhold kun vist på skærm</td>
  </tr>
</table>

</body>

</html>
Avatar billede michael_stim Ekspert
24. maj 2008 - 16:55 #22
Nu så jeg først hvad du laver. Du definerer class 2 gange i din tabel. Det skal kun gøres en gang, men med de 2 klasser i ;o)
Avatar billede roenving Novice
24. maj 2008 - 17:07 #23
-- og en efterfølgende ignoreres åbenbart (måtte lige checke det !-)

-- så din tabel skal være:

<table class="table2 menu PrintHidden" cellspacing="0" cellpadding="0">
Avatar billede hoejgaard Juniormester
24. maj 2008 - 20:21 #24
Læg et svar stim, fennec og roenving !
Mange tak for hjælpen, det virker nu !
Avatar billede fennec Nybegynder
26. maj 2008 - 08:14 #25
.o) <-- One Eyed Jack
Avatar billede michael_stim Ekspert
26. maj 2008 - 08:47 #26
Ellers tak, samler ikke på point ;o)
Avatar billede hoejgaard Juniormester
26. maj 2008 - 09:34 #27
så mangler vi bare roenving....
Avatar billede roenving Novice
26. maj 2008 - 23:04 #28
Velbekomme '-)
Avatar billede roenving Novice
27. maj 2008 - 00:33 #29
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 09:50 Mobilpay svindel Af nu_igen i Andre onlineløsninger
22/0120:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
21/0108:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
White papers
Flere white papers »