jQuery Print 函数使用 css 打印 div 内容答案

【问题标题】：jQuery Print function to print div content with cssjQuery Print 函数使用 css 打印 div 内容
【发布时间】：2013-07-19 04:07:30
【问题描述】：

我的 Wordpress 插件有这个功能，它使用 jQuery 打印来自具有类“table_disp”的 div 的内容。我怎样才能打印出css样式。

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

有什么想法吗？

【问题讨论】：

你的意思是像 $('#item').css('color','#999999'); ?
我应该使用这样的东西吗.. w.document.write(jQuery('.table_disp').css('color','#999999').html());

标签： jquery css html printing

【解决方案1】：

您需要在弹出窗口的父页面中包含您正在使用的 SAME 样式表。您可能想要制作一个包含样式表的虚拟页面存根/包装器，然后注入您的 HTML。

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

【讨论】：

你能用我的函数举例说明吗？
如果它是一个常规网站，它可能会很有用。由于我使用的是 WordPress，因此将样式表排入队列是不同的。如果我喜欢这样，它只会将我重定向到另一个不存在的页面。 :(

【解决方案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();

【讨论】：