Probleem: Tijdens afdrukken word achtergrond weergegeven.

zaterdag 30 januari 2010 20:20

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Goeiedag Programmers

Ik had een vraagje momenteel ben ik bezig met een scriptje om een pagina af te drukken of beter gezegt een div af te drukken.
Dit is aardig goed gelukt echter alleen word als erop afdrukken geklikt word, de achtergrond (CSS) nog steeds weergegeven.
Heb al het 1 en ander geprobeerd volgend het print friendly CSS maar dit wil niet echt werken iemand enig idee de script die ik gebruik luid als volgt.

Het Script

<script language="javascript">
function printrecept(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>

De Tekst

<div id="recept">Tekst</div>

De Knop

<img src="images/afdrukken.png" border="0" onClick="printrecept('recept');">

Dit script werkt perfect echter alleen moet dus de CSS uitgezet worden denk ik...Iemand enig idee

Alvast bedankt!

zaterdag 30 januari 2010 20:44

Acties:

0 Henk 'm!

boe2

'-')/

Het lijkt me het handigst als je een apart "print" mediatype voorziet in je css file: Wanneer je dan een pagina afdrukt zal je browser dan deze css gebruiken ipv je standaardcss. Zo kan je achtergrondafbeeldingen uitschakelen, en volledige elementen op hidden zetten zonder javascript te moeten gebruiken

'Multiple exclamation marks,' he went on, shaking his head, 'are a sure sign of a diseased mind.' - Pratchett.

zaterdag 30 januari 2010 20:50

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

Hoi en welkom op GoT

.

Paar kleine puntjes: Als je code post, gebruik dan a.u.b. code tags. Neem ook even Waar hoort mijn topic? door want ik zet je topic nu van PRG >> WEB. En tot slot, mocht je dat nog niet gedaan hebben, kijk even onze Quickstart waardoor je hier snel en makkelijk wegwijs zal worden

Verder: eensch met Boeboe. Zet in je gewone stylesheet:

Cascading Stylesheet: main.css

1
2
3

element.class {
  background: #fff url('foo/bar.jpg') top left no-repeat;
}

Maak een print-stylesheet:

Cascading Stylesheet: print.css

1
2
3

element.class {
  background-image: none;
}

Of iets van die strekking. Dan mediatype in je HTML hangen:

HTML:

1 2	<link rel="stylesheet" type="text/css" href="/css/main.css" media="all"> <link rel="stylesheet" type="text/css" href="/css/print.css" media="print">

...en klaar. Scheelt ook weer een boel overbodige JS. Zo kun je ook nog (bijv.) makkelijk footers/menu's en andere zaken "hiden" of anders stylen voor print. Wat ik vaak doe is (o.a.) de navigatie op display:none zetten en overbodige elementen verwijderen zodat je feitelijk niet veel meer over houdt dan een sitelogo/naam en de daadwerkelijke "content" van die pagina.

[ Voor 62% gewijzigd door RobIII op 30-01-2010 20:58 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zaterdag 30 januari 2010 21:22

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Reeds opgelost!

Misschien voor overige mensen die ook alleen een DIV wilt printen:

Het script

function afdrukken()
{
var a = window.open('','','width=600,height=500');
a.document.open("text/html");
a.document.write('<html><head>');
a.document.write('</head><body>');
a.document.write(document.getElementById('recept').innerHTML);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>

De tekst

<div id="recept">tekst</div>

De knop

<img src="images/afdrukken.png" border="0" onClick="afdrukken()">

In ieder geval bedankt allemaal

Deze werkt Perfect!

EDIT: Bedankt RobIII voor de warme welkom

- Dat ga ik ook eens uitproberen moet het toch ook op die manier voor elkaar krijgen.

[ Voor 9% gewijzigd door Verwijderd op 30-01-2010 21:23 ]

zaterdag 30 januari 2010 21:25

Acties:

0 Henk 'm!

Sjeik

De manier van RobIII werkt ook als je de webpagina op een andere manier afdrukt dan via jouw knop (dus via ctrl+p of bestand -> afdrukken). Ik zou hier ook zeker naar kijken! Succes ermee.

Was ik maar rijk en niet zo knap...

zaterdag 30 januari 2010 22:22

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Sjeik schreef op zaterdag 30 januari 2010 @ 21:25:
De manier van RobIII werkt ook als je de webpagina op een andere manier afdrukt dan via jouw knop (dus via ctrl+p of bestand -> afdrukken). Ik zou hier ook zeker naar kijken! Succes ermee.

Inderdaad. Doe bijvoorbeeld maar eens via je browser een print preview opvragen van dit topic

Intentionally left blank

zaterdag 30 januari 2010 22:25

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Aha op die manier had ik het nog geen eens bekeken. Naja het is duidelijk dat ik weer aan het werk moet

zondag 31 januari 2010 00:06

Acties:

0 Henk 'm!

Sebazzz

3dp

crisp schreef op zaterdag 30 januari 2010 @ 22:22:
[...]

Inderdaad. Doe bijvoorbeeld maar eens via je browser een print preview opvragen van dit topic

Times

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

zondag 31 januari 2010 11:04

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Sebazzz schreef op zondag 31 januari 2010 @ 00:06:
[...]

Times

serif fonts zijn vziw beter geschikt voor print dan sans-serif fonts

Intentionally left blank

zondag 31 januari 2010 12:36

Acties:

0 Henk 'm!

Raynman

crisp schreef op zondag 31 januari 2010 @ 11:04:
[...]

serif fonts zijn vziw beter geschikt voor print dan sans-serif fonts

Maar minder 'hip'

, zeker sinds het niet meer standaard is voor Word-gebruikers (toch?). En over Times wordt ook gezeurd omdat het zo alomtegenwoordig is, maar dat wil je juist voor een website. Of je moet gewoon font-family: serif; neerzetten natuurlijk, dan kan men zelf een voorkeur zetten in de browser.

zondag 31 januari 2010 12:39

Acties:

0 Henk 'm!

Sebazzz

3dp

crisp schreef op zondag 31 januari 2010 @ 11:04:
[...]

serif fonts zijn vziw beter geschikt voor print dan sans-serif fonts

Misschien, maar persoonlijk vind ik het niet echt prettig lezen, ook niet op papier. Maar that's just me

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

Onderwerpen