打印樣式表不會影響使用JavaScript

我必須聲明的CSS樣式頁面和打印在CSS這樣的：打印樣式表不會影響使用JavaScript

@page{ 
size :A4 landscape; 
} 

@media print { 
table{ 
    border-collapse: collapse; 
    font-family : serif; 
    font-size : 10px; 
} 

table, th, td{ 
    border : 1px solid black; 
} 

th{ 
    text-align: center; 
} 

th:first-child{ 
    width: 10%; 
} 

td{ 
    background-color: red; 
    color: blue; 
} 
}

這是CSS加載成功的瀏覽器，我檢查一下。

現在，我有一個js函數像這樣的管理打印頁：

function printDiv(divName) { 
    var printContents = document.getElementById(divName).innerHTML; 
    var originalContents = document.body.innerHTML; 
    document.body.innerHTML = printContents; 
    window.print(); 
    document.body.innerHTML = originalContents;

}

你知道，我有一個表，其實，這是一個模態表：

<table class="table table-bordered" id="table-struk"> 
<thead> 
    <tr> 
     <th style="width: 30%;">Item</th> 
     <th style="width: 15%;">By</th> 
     <th style="width: 18%;">Harga</th> 
     <th style="width: 2%;">Qty</th> 
     <th style="width: 30%;">Sub Total</th> 
    </tr> 

</thead> 

<tbody> 

    <tr><td>Gunting</td><td>Arif</td><td>85000</td><td>2</td><td>170000</td></tr></tbody> 

<tfoot> 
    <tr> 
     <td colspan="2"></td> 
     <td colspan="2">Jumlah Qty :</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td colspan="2">Kasir 1</td> 
     <td colspan="2">Total Pembayaran :</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td colspan="2"></td> 
     <td colspan="2">Cust. Bayar :</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td colspan="2"></td> 
     <td colspan="2">Kembali :</td> 
     <td></td> 
    </tr> 
</tfoot> 
</table>

這是使用此功能的按鈕：

<button class="btn btn-success" onclick=' 
       w = window.open(); 
       w.document.write($("#modalContent").html()); 
       w.print();w.close();' 
     type="button">Print Test</button>

我的問題是，該CSS不工作，該頁面現在可以打印，但不能使用上面的樣式表單css，任何幫助，它如此讚賞。

來源

2016-11-03 Fadly Dzil

而你在哪裏注入你的CSS成你正在打開的新窗口？ – CBroe

您是否使用上面顯示的按鈕或js代碼中的onclick？ – Weedoze

你應該下文中注入的CSS你的新窗口內與media="print"

使用的代碼和替換href值與路徑的css文件

var w= window.open(); 
w.document.write('<html><head><title></title>'); 
w.document.write("<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>"); //Inject CSS 
w.document.write('</head><body >'); 
w.document.write($("#modalContent").html());//Your data 
w.document.write('</body></html>'); 

mywindow.print(); 
mywindow.close();

來源

2016-11-03 12:59:16 Weedoze

打印樣式表不會影響使用JavaScript

回答

相關問題