javascript:window.print()
W celu wydrukowania zawartości dokumentu HTML można użyć wbudowanej metody języka JavaScript – window.print(). Polecenie uruchamia systemowe okienko kreatora wydruku. To samo co użycie kombinacji Ctrl+P na klawiaturze. Jeśli nie masz w systemie zainstalowanej drukarki to zgłoszony zostanie wyjątek.
Przykład:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Drukowanie strony HTML</title> </head> <body> <h1>window.print()</h1> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p><a href="#" onclick="javascript:window.print()">wydrukuj</a></p> </body> </html> |
Po Kliknięciu na hiperłącze „wydrukuj” nastąpi wywołanie okienka wydruku. Wydruk dotyczy całej zawartości strony, tak więc ujęte zostanie wszystko co jest zamieszczone na stronie, np. menu, sidebar, stopka itd (czyli zbędna zawartość, nie mówiąc już o niepotrzebnej stracie tuszu). Aby tego uniknąć należy zapisać osobny szablon HTML z właściwą treścią do wydruku a na stronie umieścić hiperłącze do niego.
Przykład:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Drukowanie strony HTML</title> </head> <body> <h1>window.print()</h1> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p><a href="print.html">wydrukuj</a></p> </body> </html> |
Plik print.html z przygotowaną zawartością do wydruku:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body onload="javascript:window.print()"> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </body> </html> |
Zauważ, że funkcja window.print() znajduje się w znaczniku <body> i w atrybucie onload, który po załadowaniu strony automatycznie uruchamia proces wydruku. Wadą tego rozwiązania jest konieczność przygotowania dodatkowego szablonu z powieloną treścią.
media=”print”
Preferowanym sposobem na wydruk zawartości dokumentu HTML jest skorzystanie z właściwości media=”print” w znaczniku dołączającym arkusz stylów:
|
1 |
<link href="print.css" rel="stylesheet" media="print" /> |
W osobnym pliku print.css ukrywamy (display:none) elementy/znaczniki, które chcemy pominąć przy drukowaniu. Możemy również inaczej ostylować paragrafy, nagłówki lub inne elementy formatujące wygląd, zmieniając ich rozmiar, krój, kolor itd.
Przykład zawartości pliku print.css:
|
1 |
header, footer, nav { display: none; } |
Jak widać, to chyba najmniej kłopotliwe rozwiązanie :).
Obrazek wyróżniający do posta: PaliGraficas