Gedeelte webpagina printen - Softwareontwikkeling

Vraag

woensdag 7 maart 2018 10:10

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Hi,

hoe krijg ik het voor elkaar om slechts een gedeelte van deze pagina te printen:

code:

-knip-


<body>



<table border="0">
<tr><td><img src="logo.png" class="logo"></td></tr></table>
<br>
<!-- Geef de resultaten van zoekactie op Corporate Key weer -->
<table border="0">


<tr><td></td><td></td><td></td><td rowspan=23 valign="top"><span id = "SpanPhoto"></span></td><td rowspan=23 colspan=2 valign="top" ><textarea id="strGroups" readonly ></textarea></td></tr>
<tr><td Class="tdfontcolor">LogonID</td><td Class="tdSeperator">:</td><td><span id = "SpanAccount"></span></td></tr>
<tr><td Class="tdfontcolor">Corporate Key</td><td Class="tdSeperator">:</td><td><span id = "SpanCoorpKey"></span></td></tr>
<tr><td Class="tdfontcolor">Personeelsnummer</td><td Class="tdSeperator">:</td><td><span id = "SpanPersoneelsNummer"></span></td></tr>
<tr><td Class="tdfontcolor">Naam</td><td Class="tdSeperator">:</td><td><span id = "SpanDisplayName"></span></td></tr>
<tr><td Class="tdfontcolor">E-Mail</td><td Class="tdSeperator">:</td><td><span id = "SpanEmail"></span></td></tr>
<tr><td Class="tdfontcolor">Telefoon</td><td Class="tdSeperator">:</td><td><span id = "SpanTelephoneNumber"></span></td></tr>
<tr><td Class="tdfontcolor">VDI SMS</td><td Class="tdSeperator">:</td><td><span id = "SpanVDISMSNumber"></span></td></tr>
<tr><td Class="tdfontcolor">GSM</td><td Class="tdSeperator">:</td><td><span id = "SpanMobile"></span></td></tr>
<tr><td Class="tdfontcolor">Bedrijf</td><td Class="tdSeperator">:</td><td><span id = "SpanCompany"></span></td></tr>
<tr><td Class="tdfontcolor">Gebouw/Kamer</td><td Class="tdSeperator">:</td><td><span id = "SpanPhysicalDeliveryOfficeName"></span></td></tr>
<tr><td Class="tdfontcolor">Afdeling</td><td Class="tdSeperator">:</td><td><span id = "SpanDepartment"></span></td></tr>
<tr><td Class="tdfontcolor">Profiel</td><td Class="tdSeperator">:</td><td><span id = "SpanProfilePath"></span></td></tr>
<tr><td Class="tdfontcolor">Homedir</td><td Class="tdSeperator">:</td><td><span id = "SpanHomeDirPath"></span></td></tr>


<!-- <tr><td Class="tdfontcolor">Mailserver</td><td Class="tdSeperator">:</td><td><span id = "SpanMailServer"></span><span id ="SpanServerOK"></span></td></tr> -->
<tr><td Class="tdfontcolor">Account Disabled</td><td Class="tdSeperator">:</td><td><span id = "SpanDisabled"></span></td></tr>
<tr><td Class="tdfontcolor">Account Gelocked</td><td Class="tdSeperator">:</td><td><span id = "SpanLocked"></span></td></tr>
<tr><td Class="tdfontcolor">Paswoord gewijzigd</td><td Class="tdSeperator">:</td><td><span id = "SpanPassWordChanged"></span></td></tr>
<tr><td Class="tdfontcolor">Account gecreerd</td><td Class="tdSeperator">:</td><td><span id = "SpanWhenCreated"></span></td></tr>
<tr><td Class="tdfontcolor">NN GRAS</td><td Class="tdSeperator">:</td><td><span id = "SpanGras"></span></td></tr>
<tr><td Class="tdfontcolor">Webmail Ja/Nee</td><td Class="tdSeperator">:</td><td><span id = "SpanWebMail"></span></td></tr>
<tr><td Class="tdfontcolor">Remote Access Ja/Nee</td><td Class="tdSeperator">:</td><td><span id = "SpanRemoteAccess"></span></td></tr>
</table>
<br>
<table border="0">
<tr><td Class="tdfontcolor">Manager</td><td Class="tdSeperator">:</td><td><span id = "SpanInfoManager"></span></td></tr>
<tr><td Class="tdfontcolor">Telefoon Manager</td><td Class="tdSeperator">:</td><td><span id = "SpanTelephoneNumberManager"></span></td></tr>
<tr><td Class="tdfontcolor">Organisatie Code</td><td Class="tdSeperator">:</td><td><span id = "SpanOrganizationCode"></span></td></tr>
<tr><td Class="tdfontcolor">Department Code</td><td Class="tdSeperator">:</td><td><span id = "SpanDepartmentCode"></span></td></tr>
<tr><td Class="tdfontcolor">Department ID</td><td Class="tdSeperator">:</td><td><span id = "SpanDepartmentNumber"></span></td></tr>

</table>
<br>

<table border=0>
<tr><td Class="tdfontcolor">Zoek op Corp Key of Logon Id : </td><td Class="tdSeperator"></td><td><input type="text"  name="aLogin" size="10" onkeypress="if window.event.keycode=13 then Login" language="vbscript"></td> 

</td></tr>
</table>


<br>
<button onclick="myFunction()">Print</button>

</body>
</html>

Ik heb dit geprobeerd met Javascript, met .css, maar ik krijg óf NIETS geprint, óf gewoon de hele pagina. En ik wil dus alleen het bovenste gedeelte geprint hebben, dus /m

code:

1	<tr><td Class="tdfontcolor">Homedir</td><td Class="tdSeperator">:</td><td><span id = "SpanHomeDirPath"></span></td></tr>

Red een boom, help me de oplossing te implementeren

¯\_(ツ)_/¯

Beste antwoord (via M.v.Veelen op 08-03-2018 14:00)

donderdag 8 maart 2018 13:54

Janoz

Moderator Devschuur®

!litemod

De nesting van je code klopt volgens mij niet. De div begint in je tabel en eindigt erbuiten. Dat levert natuurlijk geen valide HTML op.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

Alle reacties

woensdag 7 maart 2018 10:13

Acties:

+1 Henk 'm!

TeraMod

Cloud Enablement Desk

CSS for print

woensdag 7 maart 2018 10:15

Acties:

0 Henk 'm!

MAX3400

XBL: OctagonQontrol

Welke browser? Want je zou eventueel kunnen kijken of FireShot iets voor je kant betekenen.

Mijn advertenties!!! | Mijn antwoorden zijn vaak niet snowflake-proof

woensdag 7 maart 2018 10:16

Acties:

+1 Henk 'm!

frickY

Behalve met CSS kan je ook met een

code:

1	<link rel="alternate" media="print" href="?">

naar een andere pagina verwijzen die gebruikt moet worden om te printen. Op die pagina toon je dan alleen wat je wel wilt afdrukken, eventueel in een voor print geoptimaliseerde layout.

woensdag 7 maart 2018 10:34

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Het probleem is dus dat ik van alles al heb geprobeerd met css / Javascript, maar dat het dus of niet is of alles. En een andere browser is geen optie, het moet gewoon in IE werken....

Vandaar dat ik de code ook heb geplaatst, in de hoop dat iemand tegen hetzelfde aanloopt maar toch de oplossing weet te vinden

¯\_(ツ)_/¯

woensdag 7 maart 2018 10:43

Acties:

0 Henk 'm!

Reptile209

- gers -

Deze tutorial al gezien? Dat lijkt wel een aardige samenvatting te geven van je opties.
En kan je anders een (kort) voorbeeldje geven van een minimale pagina en minimale css die bij jou niet werkt? Want 'van alles geprobeerd' helpt niet echt om te zien wat je eventueel verkeerd doet

Zo scherp als een voetbal!

woensdag 7 maart 2018 11:03

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Ik heb deze geprobeerd: http://kbase.icbconsultin...y-what-s-within-a-div-tag maar krijg bij het voorbeeld al een foutmelding.

Ik heb een .css oplossing geprobeerd (https://stackoverflow.com...-working-with-css-changes), waarbij het voorbeeld prima werkte, maar ik het niet kon verwerken in mijn code.

Deze laatste heeft ook mijn voorkeur eerlijk gezegd, maar krijg het niet gecombineerd met mijn code.

¯\_(ツ)_/¯

woensdag 7 maart 2018 17:56

Acties:

0 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Waar loop je dan precies op vast met het invoegen in je huidige style?

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

woensdag 7 maart 2018 18:35

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Nou, dat het niet werkt zoals ik zou willen?

De printopdracht print of alles, of helemaal niets. En ik wil dus graag alleen dat eerste blok geprint hebben.

¯\_(ツ)_/¯

woensdag 7 maart 2018 19:38

Acties:

0 Henk 'm!

Cartman!

Volgens mij wil je 2 dingen:

- een print stylesheet
- een knopje op de pagina die het printen start

Als je een print stylesheet toevoegt kun je met dev tools gewoon bekijken hoe dat eruit ziet of desnoods druk je elke keer op print en bekijk je wat de viewer ervan maakt.

Voor een knopje met print zou dit voldoende moeten zijn:

JavaScript:

1	window.print();

woensdag 7 maart 2018 20:12

Acties:

0 Henk 'm!

Reptile209

- gers -

M.v.Veelen schreef op woensdag 7 maart 2018 @ 18:35:
Nou, dat het niet werkt zoals ik zou willen?

De printopdracht print of alles, of helemaal niets. En ik wil dus graag alleen dat eerste blok geprint hebben.

Geef nou eens de (kortste mogelijke) code waarmee je het probeert en het niet werkt. Want je blijft een beetje hangen in "doet het niet", en dat schiet voor niemand op. En wil je nu het liefst een javascript- of een css-oplossing? Dan kan daar ook wat focus komen.

Zo scherp als een voetbal!

woensdag 7 maart 2018 20:17

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Om met de laatste vraag te beginnen: dat heb ik al aangegeven.

M.v.Veelen schreef op woensdag 7 maart 2018 @ 11:03:

Deze laatste heeft ook mijn voorkeur eerlijk gezegd, maar krijg het niet gecombineerd met mijn code.

Ik kan moeilijk alle combinaties posten die ik heb geprobeerd. Neem je nu de laatste (css) oplossing, dan plak ik die code in mijn code, omsluit het gedeelte wat ik geprint wil hebben met de div's en dan krijg ik een volledige pagina geprint.

We kunnen wel doen alsof ik het niet geprobeerd heb of me er te makkelijk vanaf wil maken, maar geloof me: ik heb tig oplossing in de code geprobeerd en het is me niet gelukt. Een simpele pagina, net als in de voorbeelden lukt perfect, maar de combinatie met mijn code is simpelweg geen 1 keer gelukt.

Dus: ligt het aan de code, ligt het aan de printopdracht, of aan de manier hoe ik de code in mijn code plak? Ik heb geen idee, vandaar dat ik me hier heb gemeld. Ik heb nog geen reactie gezien waarin iemand mijn code heeft genomen en het eens getest heeft, of wel?

¯\_(ツ)_/¯

woensdag 7 maart 2018 20:32

Acties:

0 Henk 'm!

TERW_DAN

Met een hamer past alles.

Maar hoe ziet je print.css er dan uit? Je kunt wel roepen dat je van alles probeert, maar als je niets laat zien kunnen wij je natuurlijk ook niet helpen.

Wat is er zo bijzonder aan jouw code ten opzichte van het voorbeeld waarin je het wel had werken? Het ziet er gewoon uit als een simpel tabelletje.

woensdag 7 maart 2018 21:05

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Ik zal morgen wat code posten. Het staat niet op m'n MBP. Testen doe ik op een Windows machine en die heb ik nu niet bij me. Wordt vervolgd.

¯\_(ツ)_/¯

woensdag 7 maart 2018 21:28

Acties:

0 Henk 'm!

Ramon

Cascading Stylesheet:

@media print {
    table { display: none; }

    table:nth-child(3) {
        display: block;
    }
}

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

donderdag 8 maart 2018 11:13

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Verbergt dit niet de gehele table? Ik wilde vandaag de code proberen / delen, maar dat wordt toch morgenmiddag. Wel jammer, want ik ben erg nieuwsgierig of ik het met jullie suggesties alsnog voor elkaar ga krijgen. Bedankt tot zover in ieder geval!

¯\_(ツ)_/¯

donderdag 8 maart 2018 11:31

Acties:

0 Henk 'm!

TERW_DAN

Met een hamer past alles.

Ja, maar je zet 1 child specifiek weer op block. Dus dan krijg je 'm weer te zien.

donderdag 8 maart 2018 11:35

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Ik moet morgen dan maar even kijken hoe dat werkt. Dan eerst ook maar even kijken hoe dat met een "child" werkt

Ben daar teveel n00b voor om dat zo meteen te snappen. Eerst lezen dan maar morgen.

Edit: ik ga onder Parallels (Windows op de MBP) eens wat proberen. Is er een manier om een print-preview te krijgen, zodat ik niet telkens hoef te printen? Dat scheelt weer wat bomen namelijk.

Hopelijk kan ik de situatie zo voldoende nabootsen en tot een oplossing komen.

[ Voor 41% gewijzigd door M.v.Veelen op 08-03-2018 11:41 ]

¯\_(ツ)_/¯

donderdag 8 maart 2018 12:12

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Ik zit vast helemaal verkeerd, want met onderstaande code print hij nog steeds alles (in een .pdf om te testen):

pagina.hta

code:

<html>
<head>
<title>Medewerkers informatie</title>
<link rel="stylesheet" href="style-page.css" type="text/css" media="screen">
<link rel="stylesheet" href="style-print.css" type="text/css" media="print">
</style>

<script>
function myFunction() {
    window.print();
}
</script>

<HTA:APPLICATION   NAVIGABLE = "yes" />
<!--mstheme--><link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="../_themes/Wheat/Whea1011-65001.css"><meta name="Microsoft Theme" content="Wheat 1011, default">
</head>


<body>
<table border="0">
<tr><td><img src="logo.png" class="logo"></td></tr></table>
<br>
<!-- Geef de resultaten van zoekactie op Corporate Key weer -->
<table border="0">
<tr><td></td><td></td><td></td><td rowspan=23 valign="top"><span id = "SpanPhoto"></span></td><td rowspan=23 colspan=2 valign="top" ><textarea id="strGroups" readonly ></textarea></td></tr>

<div id="div1">

<tr><td Class="tdfontcolor">LogonID</td><td Class="tdSeperator">:</td><td><span id = "SpanAccount"></span></td></tr>

</div>

<div class="unwanted-div">

<tr><td Class="tdfontcolor">Corporate Key</td><td Class="tdSeperator">:</td><td><span id = "SpanCoorpKey"></span></td></tr>
<tr><td Class="tdfontcolor">Personeelsnummer</td><td Class="tdSeperator">:</td><td><span id = "SpanPersoneelsNummer"></span></td></tr>
<tr><td Class="tdfontcolor">Naam</td><td Class="tdSeperator">:</td><td><span id = "SpanDisplayName"></span></td></tr>
<tr><td Class="tdfontcolor">E-Mail</td><td Class="tdSeperator">:</td><td><span id = "SpanEmail"></span></td></tr>
<tr><td Class="tdfontcolor">Telefoon</td><td Class="tdSeperator">:</td><td><span id = "SpanTelephoneNumber"></span></td></tr>
<tr><td Class="tdfontcolor">VDI SMS</td><td Class="tdSeperator">:</td><td><span id = "SpanVDISMSNumber"></span></td></tr>
<tr><td Class="tdfontcolor">GSM</td><td Class="tdSeperator">:</td><td><span id = "SpanMobile"></span></td></tr>
<tr><td Class="tdfontcolor">Bedrijf</td><td Class="tdSeperator">:</td><td><span id = "SpanCompany"></span></td></tr>
<tr><td Class="tdfontcolor">Gebouw/Kamer</td><td Class="tdSeperator">:</td><td><span id = "SpanPhysicalDeliveryOfficeName"></span></td></tr>
<tr><td Class="tdfontcolor">Afdeling</td><td Class="tdSeperator">:</td><td><span id = "SpanDepartment"></span></td></tr>
<tr><td Class="tdfontcolor">Profiel</td><td Class="tdSeperator">:</td><td><span id = "SpanProfilePath"></span></td></tr>
<tr><td Class="tdfontcolor">Homedir</td><td Class="tdSeperator">:</td><td><span id = "SpanHomeDirPath"></span></td></tr>

<!-- <tr><td Class="tdfontcolor">Mailserver</td><td Class="tdSeperator">:</td><td><span id = "SpanMailServer"></span><span id ="SpanServerOK"></span></td></tr> -->
<tr><td Class="tdfontcolor">Account Disabled</td><td Class="tdSeperator">:</td><td><span id = "SpanDisabled"></span></td></tr>
<tr><td Class="tdfontcolor">Account Gelocked</td><td Class="tdSeperator">:</td><td><span id = "SpanLocked"></span></td></tr>
<tr><td Class="tdfontcolor">Paswoord gewijzigd</td><td Class="tdSeperator">:</td><td><span id = "SpanPassWordChanged"></span></td></tr>
<tr><td Class="tdfontcolor">Account gecreerd</td><td Class="tdSeperator">:</td><td><span id = "SpanWhenCreated"></span></td></tr>
<tr><td Class="tdfontcolor">NN GRAS</td><td Class="tdSeperator">:</td><td><span id = "SpanGras"></span></td></tr>
<tr><td Class="tdfontcolor">Webmail Ja/Nee</td><td Class="tdSeperator">:</td><td><span id = "SpanWebMail"></span></td></tr>
<tr><td Class="tdfontcolor">Remote Access Ja/Nee</td><td Class="tdSeperator">:</td><td><span id = "SpanRemoteAccess"></span></td></tr>
</table>

<br>

<table border="0">
<tr><td Class="tdfontcolor">Manager</td><td Class="tdSeperator">:</td><td><span id = "SpanInfoManager"></span></td></tr>
<tr><td Class="tdfontcolor">Telefoon Manager</td><td Class="tdSeperator">:</td><td><span id = "SpanTelephoneNumberManager"></span></td></tr>
<tr><td Class="tdfontcolor">Organisatie Code</td><td Class="tdSeperator">:</td><td><span id = "SpanOrganizationCode"></span></td></tr>
<tr><td Class="tdfontcolor">Department Code</td><td Class="tdSeperator">:</td><td><span id = "SpanDepartmentCode"></span></td></tr>
<tr><td Class="tdfontcolor">Department ID</td><td Class="tdSeperator">:</td><td><span id = "SpanDepartmentNumber"></span></td></tr>
</table>

</div>

<br>

<table border=0>
<tr><td Class="tdfontcolor">Zoek op Corp Key of Logon Id : </td><td Class="tdSeperator"></td><td><input type="text"  name="aLogin" size="10" onkeypress="if window.event.keycode=13 then Login" language="vbscript"></td> 

</td></tr>
</table>
<br>

<button onclick="myFunction()">Print this page</button>

</body>
</html>

style-print.css:

code:

@media print
   {
      .unwanted-div, button{
      display:none;  
      }       
   }

Die 'button' in de css lijkt me ook overbodig, maar ik ben wat aan het knippen en plakken geweest zonder precies alle onderliggende technieken te begrijpen.

¯\_(ツ)_/¯

donderdag 8 maart 2018 13:51

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Deze (http://jsfiddle.net/576ttew8/) ook geprobeerd, testpagina werkt prima, maar icm met mijn code is het alles of niets. Wat zie ik over het hoofd?

¯\_(ツ)_/¯

donderdag 8 maart 2018 13:54

Acties:

Beste antwoord ✓
+1 Henk 'm!

Janoz

Moderator Devschuur®

!litemod

De nesting van je code klopt volgens mij niet. De div begint in je tabel en eindigt erbuiten. Dat levert natuurlijk geen valide HTML op.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

donderdag 8 maart 2018 14:00

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Janoz schreef op donderdag 8 maart 2018 @ 13:54:
De nesting van je code klopt volgens mij niet. De div begint in je tabel en eindigt erbuiten. Dat levert natuurlijk geen valide HTML op.

Dat is het !

Ik kan nu de tabel in stukken opdelen welke ik wel en welke ik niet geprint wil hebben. Zie je, iemand die me net dat zetje kan geven...... Dankjewel !

¯\_(ツ)_/¯

donderdag 8 maart 2018 14:07

Acties:

0 Henk 'm!

Janoz

Moderator Devschuur®

!litemod

Je hoeft natuurlijk geen div te gebruiken. Je zou ook kunnen kijken of je specifieke TR's onzichtbaar maakt.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

donderdag 8 maart 2018 14:12

Acties:

0 Henk 'm!

mcDavid

M.v.Veelen schreef op donderdag 8 maart 2018 @ 14:00:
[...]

Dat is het !

Ik kan nu de tabel in stukken opdelen welke ik wel en welke ik niet geprint wil hebben. Zie je, iemand die me net dat zetje kan geven...... Dankjewel !

Op zich had je dit natuurlijk ook gewoon kunnen ontdekken door je code door een W3 validator te halen. Of door gewoon goed op de syntax highlighting van je IDE te letten.

donderdag 8 maart 2018 14:30

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Janoz schreef op donderdag 8 maart 2018 @ 14:07:
Je hoeft natuurlijk geen div te gebruiken. Je zou ook kunnen kijken of je specifieke TR's onzichtbaar maakt.

Hoe zou ik de code dan moeten aanpassen? Kun je een klein stukje voordoen?

En ja, achteraf.....

¯\_(ツ)_/¯

donderdag 8 maart 2018 15:32

Acties:

0 Henk 'm!

mcDavid

nouja, je code linten is nogal een essentiële stap in het debuggen... zou wat zijn als we voor iedere typfout een topic zouden openen hier... Niet dat dat persé erg is, als je er maar van leert hoe je dit soort simpele dingen zelf op kunt lossen. Vandaar mijn post

Verder, je weet hoe een class werkt toch? Waarom gebruik je die niet op een (aantal) tr's?

"Kun je het even voordoen" is nog zo'n dooddoener waar je niets van leert. Probeer het eerst zelf, laat zien wat je doet, waarom het wel- of niet lukt, en we praten weer verder!

donderdag 8 maart 2018 16:08

Acties:

0 Henk 'm!

M.v.Veelen

Topicstarter

Ik had in mijn eerste bericht moeten zetten dat ik 0 verstand heb van classes enz. Kom een heel eind, maar heb me nooit verdiept in de onderliggende technieken. Het is meer trial and error. En met dit duwtje zie ik dat ik telkens dezelfde fout maakte.

Het resultaat is nu naar wens, de code kan mss iets netter / fraaier, maar of dat nog nodig is....

¯\_(ツ)_/¯

Pagina: 1

Reageer