使用jquery按下打印按钮时，css样式不适用

我想通过使用jquery按下打印按钮来打印表格，但应用于表格的样式不起作用。这里是我的CSS使用jquery按下打印按钮时，css样式不适用

<style> 
table {border-collapse:collapse;} 
table td, table th{ border: 1px solid #73afb7; text-align:left;}  
</style>

jQuery代码

$(document).ready(function() { 
    $('#print').click(function(){ 
     var divContents = $('#abc').html(); 
     var printWindow = window.open('', '', ',width=800'); 
     printWindow.document.write('<html>'); 
     printWindow.document.write('<body >'); 
     printWindow.document.write(divContents); 
     printWindow.document.write('</body></html>'); 
     printWindow.print(); 
     printWindow.close(); 
    });//end of print button click 
});//end of ready function

HTML

<div id="abc"> 
    <table id="tbl"> 
    <tr> 
     <th>S.No</th> 
     <th>NAME</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>AYAZ</td> 
    </tr> 
    </table> 
</div>

当按下打印按钮jquery的印刷品没有边界的表格内容

来源

2014-01-10 user2408247

在你的jQuery代码中，你使用'window'创建一个新窗口。打开“，那么新窗口与主窗口是分开的，不会共享它的CSS。 – AeroX

添加一个单独的与它的CSS：

$(document).ready(function() { 
    $('#print').click(function(){ 
     var divContents = $('#abc').html(); 
     var printWindow = window.open('', '', ',width=800'); 
     printWindow.document.write('<html>'); 
     printWindow.document.write('<link rel="stylesheet" type="text/css" href="style/print.css"/>'); 
     printWindow.document.write('<body >'); 
     printWindow.document.write(divContents); 
     printWindow.document.write('</body></html>'); 
     printWindow.print(); 
     printWindow.close(); 
    });//end of print button click 
});//end of ready function

你的CSS有这样的：

@media print 
    { 
    p.test {font-family:times,serif;font-size:10px;} 
    }

来源

2014-01-10 11:49:17 KunJ

你可以尝试<html>和<body>之间添加此：

printWindow.document.write('<html>'); 
printWindow.document.write('<head><style>'); 
printWindow.document.write('table {border-collapse:collapse;}'); 
printWindow.document.write('table td, table th{ border: 1px solid #73afb7; text-align:left;}'); 
printWindow.document.write('</style></head>'); 
printWindow.document.write('<body >');

来源

2014-01-10 11:49:39 Jai

为什么不：

<style> 
@media print{ 
    table {border-collapse:collapse;} 
    table td, table th{ border: 1px solid #73afb7; text-align:left;} 
} 
</style>

或者

<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

与外部文件

来源

2014-01-10 12:00:13

打印CSS是层叠样式表适用于打印文档时，用户要打印的网页参考

媒体现在设置为打印而不是屏幕：

<!-- Include Print CSS --> 
    <link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />

编号：http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/

来源

2014-01-10 12:02:40

这种类型的打印的实际创建了新的一页。如果你看看新页面中的链接，你会发现它与你的网站不一样。所以，即使链接像KunJ建议的css文件也不会工作。我建议你看看：http://www.ssdtutorials.com/tutorials/series/jquery-print.html

也请看看“媒体类型”在CSS。

该插件可以在源泉：http://plugins.jquery.com/PrintArea/

打印链接/按钮：

<a href="#" rel="testprint" id="printa">Print</a>

的rel = “testprint” 是指ü要打印

jQuery代码的区域：

$('#printa').click(function(e) { 
    var container = $(this).attr('rel'); 
    $('#' + container).printArea(); 
    return false; 
});

至于CSS，你可以包括你的CSS文件与媒体标签。请注意，您必须将其包含两次，或者在主CSS文件中使用@media。

<link href="/css/style.css" rel="stylesheet" media="screen" type="text/css" /> 
<link href="/css/style_1.css" rel="stylesheet" media="print" type="text/css" />

来源

2015-01-16 21:40:18 Prashant2008

请记住在链接中包含链接页面的一些内容，以防链接不可用。这样你的答案仍然会有帮助。 – ryanyuyu

使用jquery按下打印按钮时，css样式不适用

回答

相关问题