NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Jaroslav Smrž:2.6.2019 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.6.2019 7:47
/* Life runs on code */
Avatar
Martin Donát
Člen
Avatar
Odpovídá na Jaroslav Smrž
Martin Donát:2.6.2019 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í
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
2.6.2019 9:28
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Martin Donát
Jaroslav Smrž:3.6.2019 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.6.2019 7:03
/* Life runs on code */
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Jaroslav Smrž:3.6.2019 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.6.2019 7:14
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.6.2019 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.6.2019 7:57
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Peter Mlich
Jaroslav Smrž:3.6.2019 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.6.2019 8:03
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Jaroslav Smrž
Peter Mlich:3.6.2019 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.6.2019 10:25
 
Nahoru Odpovědět
3.6.2019 10:25
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.6.2019 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.6.2019 10:30
 
Nahoru Odpovědět
3.6.2019 10:28
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.6.2019 15:33

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

 
Nahoru Odpovědět
3.6.2019 15:33
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Peter Mlich
Jaroslav Smrž:3.6.2019 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.6.2019 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.