使用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樣式不適用

回答

相關問題