CSS 样式在使用 jQuery 按下打印按钮时不适用

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

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

j查询代码

$(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打印表内容而不带边框

添加一个单独的 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;}
  }

这种类型的

打印实际上会创建一个新页面。如果您查看该新页面中的链接，您会发现它与您的网站不同。因此，即使像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" />

您可以尝试在 <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 >');

为什么不呢：

<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"/>

带外部文件

Print 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/

相关内容

最新更新

热门标签：