印刷スタイルシートの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を注入されているパスでhref値を置き換えるmedia="print"

であなたの新しいウィンドウ内でCSSを注入しなければなりませんあなたが開いているその新しいウィンドウ？ – CBroe

上記のボタンまたはjsコードでonclickを使用していますか？ – Weedoze

あなたは以下のコードを使用して、あなたの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

答えて

関連する問題