C/C++ week November Black Friday
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++
Avatar
Jaroslav Smrž
Redaktor
Avatar
Jaroslav Smrž:2. června 7:47

Ahoj, řeším teď nečekaný problém a tím je tisk pouze určité section na stránce. Nechci tisknout hlavičku ani patičku, ale jen ten určitý div nebo section. Konkrétně se jedná o jídelní lístek s poledním menu, který se načítá z databáze. Určitě na to bude mít php nějakou funkci, ale nikdy dřív jsem nic podobného neřešil, tak prosím o radu či nasměrování.

Zkusil jsem: Google, php.net

Chci docílit: Aby po kliknutí na tlačítko "print" se vytiskl pouze určitý div nebo section.

Odpovědět
2. června 7:47
/* Life runs on code */
Avatar
Odpovídá na Jaroslav Smrž
Martin Donát:2. června 9:28

Ahoj, toto se běžně jednoduše řeší v CSS přes media queries a uděláš to asi takto:
Někde v jednom společném CSS pro celou stránku přidáš blok, ve kterém buď vyjmenuješ všechny prvky stránky, které schováš (nastavíš display: none;) nebo možná ve tvém případě schováš všechno a vytvoříš si classu print. Tu poté přiřadíš sekci, která má být vidět při tisku, přičemž třídě class přiřadíš vlastnost display: block;.

/*Varianta 1*/
@media only print {
        header, nav, aside, footer {
                display: none;
        }
}
/*Varianta 2*/
@media only print {
        * {
                display: none;
        }
        .print {
                display: block;
        }
}

A pak je tedy ještě důležité mít daný CSS soubor se stylem obsahujícím výše uvedené media query naimportovaný jako:

<link type="text/css" rel="stylesheet" href="css/style.css"/>

tedy, aby link s celým CSS stylem neobsahoval atribut media a v něm třeba nastavenou hodnotu screen, potom by výše uvedené media query nefungovalo a muselo by být třeba vloženo v samostatném CSS souboru. Záleží jak to máš udělané. :-)

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět
2. června 9:28
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Martin Donát
Jaroslav Smrž:3. června 7:03

Moc děkuji. Tento postup sice znám, ale zřejmě nic lepšího není. Když by někoho napadlo nějaké jiné řešení, dejte prosím vědět. Možná se ubírám špatným směrem, ale co z toho vygenerovat pdf a to pak tisknout? Jde mi hlavně o to, aby se výsledný tisk nemusel ořezávat o adresu webu nahoře a page 1 of 1 dole jak tomu je když tisknu html stránku.

Nahoru Odpovědět
3. června 7:03
/* Life runs on code */
Avatar
Jaroslav Smrž
Redaktor
Avatar
Jaroslav Smrž:3. června 7:14

Tak nakonec jsem našel řešení pomocí JS. Když by někdo řešil podobný problém, tady je kód:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
Nahoru Odpovědět
3. června 7:14
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. června 7:57

Ja to resim na jednom webu classou noprint.

Ale pak to mam kostrbate s dalsi class, protoze chci tam mit tlacitko nahled tisku. Neco schovat, neco ne. A to tlacitko Zpet, aby se pri tisku take nezobrazilo, kdyby nekdo nahled pouzil pro tisk. Nechtelo se mi nad tim moc premyslet, no :)
https://webapp.fpf.slu.cz/…ceni_sql.php?…
Zaskrtni Demo (pokud neni) a klikni zpracuj.

 
Nahoru Odpovědět
3. června 7:57
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Peter Mlich
Jaroslav Smrž:3. června 8:03

To je super, přesně takhle bych to chtěl mít. Hodil bys mi sem kousek kódu, prosím?

Nahoru Odpovědět
3. června 8:03
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Jaroslav Smrž
Peter Mlich:3. června 10:25

??? Na te strance je uplne cely kod html/css/js. Jinak by ti ji prohlizec nezobrazil. Ale, jak rikam, mam to nepromyslene. Jenom proste ucelove jsem rychle potreboval reseni.
Melo by to fungovat tak, ze 'noprint' class neukaze na tiskarne (Firefox - print preview). Potom by tam mel byt dalsi class pro skryti pres js. A pak je tam tusim js, ktery zmeni u jednoho style tagu media z print na all. Coz je sice chytre, ale uplne na prd. Lepsi by bylo pouzit dve ruzne class. Jedna, ktera to 100% pri tisku schova a druhou spesl pro to skryti pro js.

Editováno 3. června 10:25
 
Nahoru Odpovědět
3. června 10:25
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. června 10:28
<body>
<div class="noprint"></div>

<body class="print-preview"> // class bych pridal pres js k body
<div class="noprint print-preview-visible"></div>

<style madia=print>
.noprint {display:none;}
</style>

<style madia=screen>
.print-preview .noprint {display:none;}
.print-preview .print-preview-visible {display:block;}
</style>
Editováno 3. června 10:30
 
Nahoru Odpovědět
3. června 10:28
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. června 15:33

jo, misto noprint bych pouzil print-hidden, at je to podobne print-preview-visible

 
Nahoru Odpovědět
3. června 15:33
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Peter Mlich
Jaroslav Smrž:3. června 19:50

Jasně, na stránce jsem na kód koukal, ale není to příliš komfortní, tak děkuji za přiložený výňatek. Zítra to zaimplementuji a hodím ti sem výsledek. Každopádně ještě jednou moc děkuji.

Nahoru Odpovědět
3. června 19:50
/* Life runs on code */
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.