2
を使用して影響を与えていない私はこのように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スタイルを使用できません。 何か助けていただければ幸いです。
そして、あなたがにあなたのCSSを注入されているパスで
href
値を置き換えるmedia="print"
であなたの新しいウィンドウ内でCSSを注入しなければなりませんあなたが開いているその新しいウィンドウ? – CBroe
上記のボタンまたはjsコードでonclickを使用していますか? – Weedoze