2016-05-03 8 views
0

こんにちは、80 X 297 mmサイズの領収書を印刷する必要があります。私は次のコードを印刷しています。jqueryを使用してプリンタの設定を変更できますか?

function Popup(data) 
    { 
     var mywindow = window.open('', 'my div', 'height=250px,width=250px'); 
     mywindow.document.write('<html><head><title>my div</title>'); 
     /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); 
     mywindow.document.write('</head><body>'); 

     mywindow.document.write('<div style="width:450px; word-wrap: break-word;font-size:10px;"><div class="overall_div" style="color:blue; position: absolute;top: 0px;height: 100%;width: 100%;" left:0px;><div class="login" id="mydiv" style="position: absolute;width: 75%;height: 100%;margin-left: 0px;overflow: hidden;"><div class="login-form" style="box-sizing: border-box;padding-top: 15px;margin: 8px auto;overflow: hidden;margin-top: 0px;margin-left: 0px;"><label class="item" style="font-size: 10px;" height: 100px;width: 100px;>Itm : </label><label class="item1" style="font-size: 10px;">fdshgf</label><label class="price" style="font-size: 10px; height: 100px;width: 100px;">Price : </label><label class="price1" style="font-size: 10px;">1000</label><label class="qty_prch" style="font-size: 10px; height:100px;width:100px;">Qty_Prch : </label><label class="qty_prch1" style="font-size: 10px;">2</label><label class="subtotal" style="font-size: 10px;height: 100px;width: 100px;">SubTtl : </label><label class="subtotal1" style="font-size: 10px;">1000</label><label class="discount" style="font-size: 10px;height: 100px;width: 100px;">Disc : </label><label class="discount1" style="font-size: 10px;">100</label><label class="employee" style="font-size: 10px;height: 100px;width: 100px;">Emp :</label><label class="employee1" style="font-size: 10px;">2</label><label class="qty_used" style="font-size: 10px;height: 100px;width: 100px;">Qty_Used : </label><label class="qty_used1" style="font-size: 10px;">1</label><label class="tax" style="font-size: 10px;height: 100px;width: 100px;">Tax :</label><label class="tax1" style="font-size: 10px;">15</label></div></div><div class="login1" style="width: 25%;height: 100%;margin-left: 75%;overflow: hidden;"><div class="login-form1" style="box-sizing: border-box;padding-top: 15px;margin: 8px auto;text-align: center;overflow: hidden;margin-top: 0px;margin-left: 0px;"><label class="total" style="left: 0px;top: 0px;color: black;font-size: 10px;">Total : </label><label class="total1" style="left: 10px;top: 0px;color: black;font-size: 10px;">1000</label></div></div></div></div>'); 

     mywindow.document.write('</body></html>'); 

     mywindow.print(); 
     mywindow.close(); 
     return true; 
    } 

この形式を使用してスタイルをフォーマットしましたが、この形式は上書きされます。誰か助けてくれますか?

enter image description here

答えて

0

あなたの現在のコードは、その文書がにロードされる前に、HTMLを出力します。 window.printメソッドを本体のオンロードにバインドします。

function Popup(data) 
{ 
    var mywindow = window.open('', 'my div', 'height=250px,width=250px'); 
    mywindow.document.write('<html><head><title>my div</title>'); 
    mywindow.document.write('<link rel="stylesheet" href="main.css" />'); 
    mywindow.document.write('</head><body onload="window.print()">'); 

    mywindow.document.write('<div style="width:450px; word-wrap: break-word;font-size:10px;"><div class="overall_div" style="color:blue; position: absolute;top: 0px;height: 100%;width: 100%;" left:0px;><div class="login" id="mydiv" style="position: absolute;width: 75%;height: 100%;margin-left: 0px;overflow: hidden;"><div class="login-form" style="box-sizing: border-box;padding-top: 15px;margin: 8px auto;overflow: hidden;margin-top: 0px;margin-left: 0px;"><label class="item" style="font-size: 10px;" height: 100px;width: 100px;>Itm : </label><label class="item1" style="font-size: 10px;">fdshgf</label><label class="price" style="font-size: 10px; height: 100px;width: 100px;">Price : </label><label class="price1" style="font-size: 10px;">1000</label><label class="qty_prch" style="font-size: 10px; height:100px;width:100px;">Qty_Prch : </label><label class="qty_prch1" style="font-size: 10px;">2</label><label class="subtotal" style="font-size: 10px;height: 100px;width: 100px;">SubTtl : </label><label class="subtotal1" style="font-size: 10px;">1000</label><label class="discount" style="font-size: 10px;height: 100px;width: 100px;">Disc : </label><label class="discount1" style="font-size: 10px;">100</label><label class="employee" style="font-size: 10px;height: 100px;width: 100px;">Emp :</label><label class="employee1" style="font-size: 10px;">2</label><label class="qty_used" style="font-size: 10px;height: 100px;width: 100px;">Qty_Used : </label><label class="qty_used1" style="font-size: 10px;">1</label><label class="tax" style="font-size: 10px;height: 100px;width: 100px;">Tax :</label><label class="tax1" style="font-size: 10px;">15</label></div></div><div class="login1" style="width: 25%;height: 100%;margin-left: 75%;overflow: hidden;"><div class="login-form1" style="box-sizing: border-box;padding-top: 15px;margin: 8px auto;text-align: center;overflow: hidden;margin-top: 0px;margin-left: 0px;"><label class="total" style="left: 0px;top: 0px;color: black;font-size: 10px;">Total : </label><label class="total1" style="left: 10px;top: 0px;color: black;font-size: 10px;">1000</label></div></div></div></div>'); 

    mywindow.document.write('</body></html>'); 
    //If you having trouble with the onload binding to body use this 
    mywindow.document.write('<script type="text/javascript">window.print();<\/script>'); 
    mywindow.close(); 
} 
+0

あなたがmywindow.closeをコメントアウトした場合、私は()、ドキュメントのロード時にこの関数を呼び出したが、それでも私のフォーマットは@Marcus H –

+0

[OK]を適用されません。 - あなたはポップアップウィンドウを見て、あなたが望むフォーマットを得ますか?あなたがそれを得ることができない場合、間違ったフォーマットを追加したか、適切なCSSをwindow.openのドキュメントに含めなかった。このコードを実行すると、追加したコードが正確に取得されます。 –

+0

はいCSSはそのウィンドウには適用されますが、印刷プレビューには適用されません。プレビューを参照してください。私の質問で更新されました@Marcus H –

関連する問題