2013-07-19 27 views
11

Mam tę funkcję dla mojej wtyczki Wordpress używa jQuery, która drukuje zawartość z div z klasy "table_disp". Jak mogę wydrukować styl CSS wraz z nim.Funkcja drukowania jQuery do drukowania zawartości div z css

function pop_print(){ 
    w=window.open(null, 'Print_Page', 'scrollbars=yes');   
    w.document.write(jQuery('.table_disp').html()); 
    w.document.close(); 
    w.print(); 
} 

Masz pomysł?

+0

Czy to znaczy, jak $ („pozycję #”). Css (” kolor "," # 999999 "); ? –

+0

Należy użyć coś takiego .. w.document.write (jQuery (". Table_disp"). Css ("kolor", "# 999999"). Html()); –

Odpowiedz

9

Musisz umieścić SAMOWY arkusz stylów, którego używasz na stronie nadrzędnej w wyskakującym okienku. Być może zechcesz utworzyć zwartą stronę stub/wrapper, która zawiera arkusz stylów, a następnie wstrzyknij kod HTML.

var myStyle = '<link rel="stylesheet" href="http://mysite.com/mystyle.css" />'; 
w.document.write(myStyle + jQuery('.table_disp').html()); 
+1

Czy możesz go rozwinąć na przykładzie używając mojej funkcji. –

+0

Dokonałem edycji, aby uwzględnić ten kod. –

+0

Może to być przydatne, jeśli jest to zwykła strona internetowa. Odkąd używam WordPressa, jego kolejność polega na umieszczaniu arkusza stylów w kolejce. Jeśli to lubię, po prostu przekierowuję mnie na inną stronę, która nie istnieje. :( –

1

czy można dodać plugin, plugin jQuery printThis działa świetnie (ponieważ jesteś już przy użyciu jQuery), a robi dokładnie to, czego potrzebujesz. http://plugins.jquery.com/printThis/

To sprawia iframe i wykorzystuje swoją stronę css oraz pozwala na dodatkową pliku css specjalnie do drukowania, wraz z innymi

3
function PrintElem(elem) { 
    Popup(jQuery(elem).html()); 
} 

function Popup(data) { 
    var mywindow = window.open('', 'my div', 'height=400,width=600'); 
    mywindow.document.write('<html><head><title></title>'); 
    mywindow.document.write('<link rel="stylesheet" href="http://www.test.com/style.css" type="text/css" />'); 
    mywindow.document.write('<style type="text/css">.test { color:red; } </style></head><body>'); 
    mywindow.document.write(data); 
    mywindow.document.write('</body></html>'); 
    mywindow.document.close(); 
    mywindow.print();       
} 

<a href="#" id="hrefPrint" onclick="PrintElem('.print_div')">Print</a>