Archive for 25 czerwca, 2014

jQuery – drukowanie elementu / DIVa strony (Chrome, Internet Explorer)

jquery_logoOstatnio musiałem zrobić pewien panel WWW, w którym będzie możliwość wydrukowania tylko fragmentu strony, a mianowicie wskazanego DIV. Przy wykorzystaniu jQuery oczywiście dało radę to zrobić bez problemów i działało to bez zarzutów pod Chrome, Firefox, ale jak zwykle to bywa nie działało w Internet Explorer. Po większych/mniejszy bojach udało się mi znaleźć rozwiązanie. Może komuś się przyda to i wykorzysta je u siebie.

W prostym przykładzie zrobimy tak, że poniższy skrypt dodajemy do sekcji head na stronie.
Oczywiście musimy mieć dodaną bibliotekę jQuery czyli w sekcji head najpierw dodajemy jQuery (to tak dla przypomnienia):


Następnie:

 

Powyższy skrypt zawiera tekst, który będzie zawsze drukowany niezależnie od zawartości DIVa czyli w tym przypadku to będzie “CONTENT”, a treść z DIVa jest pod zmienną ‘data’. Tym sposobem możemy przygotować cały szablon druku ze zmienną tylko jego częścią w miejscu zmiennej ‘data’ (można wykorzystywać także CSS).

Dodajemy DIV, którego zawartość będzie miała być drukowana.

some content

Następnie dodajemy przycisk na który jak klikniemy rozpocznie się drukowanie. W moim przypadku to był obrazek/ikonka drukarki:

print

To wszystko. Kod działa bardzo dobrze w Chrome, FireFox, Internet Explorer. Dobrze, że istnieje takie forum jak “stack overlow” i dzięki niemu można znaleźć odpowiedzi na wiele zagadnień.

Powered by WordPress | Designed by: NewWpThemes | Provided by Free WordPress Themes