Wie drucke ich ein presentable Layout in jquery?

Question

Unten ist die Struktur, die ich in vorzeigbarem Layout ausdrucken möchte, indem ich Kopf- und Fußzeilen hinzufüge und auch jquery-Event-Werte in den Cash- und Balance-Textboxen hinterlasse.

<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> 

Script zum ausdrucken:

//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(); 
       } 

Und das druckt, wie unten, die aus nicht attraktiv ist auch die letzten beiden Textfelder ihre Werte verloren:

Aber ich möchte etwas auszudrucken wie das das ist auch aktueller Warenkorb: Wenn ich zusätzlichen Wert wie Firmennamen übergeben möchte, der im Header angezeigt wird, ist das möglich?

Answer 1

Mit document.write überschreiben Sie alle HTML, die Sie zuvor hatten. So verlieren Sie alle zuvor geladenen Javascript und CSS. statt:

newWin.document.write(divToPrint.outerHTML);

Versuch:

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

aber auch hinzufügen, um den Rest der css und js Sie erwarten.