Функция печати jQuery для печати содержимого div с помощью css

У меня эта функция для моего плагина Wordpress использует jQuery, который печатает содержимое из div с классом "table_disp". Как я могу напечатать стиль css вместе с ним.

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

Любая идея?

Ответ 1

Вам нужно включить ТОЛЬКО таблицу стилей, которую вы используете на родительской странице во всплывающем окне. Возможно, вы захотите сделать фиктивную заглушку/обертку страницы, в которой есть ваша таблица стилей, а затем введите свой HTML.

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

Ответ 2

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>

Ответ 3

если вы можете добавить плагин, плагин JQuery printThis отлично работает (поскольку вы уже используете jQuery) и делает именно то, что вам нужно. http://plugins.jquery.com/printThis/

Он делает iframe и использует вашу страницу css plus позволяет использовать дополнительный файл css специально для печати, а также другие вещи

Ответ 4

Вместо этого добавьте таблицу стилей

var css= '<link rel="stylesheet" href="/css/print.css" />';
            var printContent = document.getElementById("printContentID");

            var WinPrint = window.open('', '', 'width=900,height=650');
            WinPrint.document.write(printContent.innerHTML);
            WinPrint.document.head.innerHTML = css;
            WinPrint.document.close();
            WinPrint.focus();
            WinPrint.print();
            WinPrint.close();