Question

我想通过使用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打印没有边框的表格内容

Answer 1

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

Answer 2

此类打印实际上会创建一个新页面。如果您查看该新页面中的链接，您会发现它与您的网站不同。因此，即使链接像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文件包含在media标签中。请注意，您必须将其包含两次，或者在主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" />

Answer 3

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

Answer 4

为什么不呢：

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

使用外部文件

Answer 5

当用户想要打印网页以供参考时，打印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/

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

5 个答案: