jqueryでプレゼン可能なレイアウトを印刷するには？

Question

以下は、私は、ヘッダー、フッターを追加することによって、提示可能なレイアウトにプリントアウトしたいとも現金とのバランステキストボックスにjQueryのイベント値を保持することにより構造体です。

<div class="small-12 medium-6 large-6 columns" id="print_item"> 
      <div class="left_content"> 
       <p><strong><u>Checkout</u></strong></p> 
       <ul class="large-block-grid-1"> 
        <li style="border-bottom: 1px solid #222;margin-bottom: 10px;"><div class="large-4 columns">Item Name</div> 
         <div class="large-1 columns">Qty</div> 
         <div class="large-4 columns">Price Subtotal</div> 
         <div class="large-3 columns">Action</div> 
        </li> 

       </ul> 
       <ul id="show-cart" class="large-block-grid-1"> 
       <li>???????</li> 

       </ul> 

       <!--agent items starts--> 
       <div id="agent"> 

       </div> 
       <!--agent items ends--> 

      <div>You have <span id="count-cart">X</span> items in your cart</div> 
      <br/> 
      <div>Total Cart:RM <span id="total-cart"></span></div> 
      <br/> 
      <div>Paid:RM <input type="text" id="cash" /></div> 
      <br/> 
      <div>Balance:RM <input type="text" id="balance" /></div> 
      <ul class="large-block-grid-3"> 
       <li><button id="continue-cart">Continue Shopping</button></li> 
       <li><button id="submit-cart">Submit Cart</button></li> 
       <li><button id="print-cart">Print Invoice</button> </li> 
      </ul> 
      </div> 

印刷に

スクリプト：

しかし、私は何かをプリントアウトしたい：

//print data 
      $("#print-cart").click(function(event){ 
       printData() 
      }); 
       function printData() { 
        var divToPrint = document.getElementById("print_item"); 
        newWin = window.open(""); 
        newWin.document.write(divToPrint.outerHTML); 
        newWin.print(); 
        newWin.close(); 
       } 

そして、これがどの以下のように出力しますまた、最後の二つのテキストボックスは、その値を失った魅力的ではありません現在のショッピングカートでもあるこのように： ヘッダーに表示する会社名のような追加値を渡したい場合は可能ですか？あなたが以前持っていたすべてのhtmlを上書きdocument.writeをして

Answer 1

。したがって、あなたは以前にロードされたすべてのjavascriptとcssを失っています。 の代わり：

newWin.document.write(divToPrint.outerHTML);

試してみてください。

newWin.document.getElementById('some id').append(the div you want to add)

しかし、また、あなたが持っていることを期待CSSやJSの残りの部分を追加します。