Ciao a tutti
in sito devo stampare una pagina html che rappresenta un otdine. Per far questo ho utilizzato js.printElement.
Il problema è che quando stampa perde tutti i css e stampa ogni blocco su una propria riga.
Come risolvo il problema?codice:<html> <head> <title>::.. Ordine ..::</title> <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/Scripts/jquery-migrate-1.1.0.min.js"></script> <script type="text/javascript" src="/scripts/jquery.printElement.js"></script> <style type="text/css"> td, th { border: #000 solid 1px; } #dvPrint td, #dvPrint th { border: #FFF solid 1px; } .titolo_pagina_stampa { float: left; width: 300px; border-bottom: 1px dotted #ececec; font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #000000; font-weight: bold; padding: 3px 0px; clear: both; text-align: left; } .sottotitolo_pagina_stampa { float: left; width: 300px; border-bottom: 1px dotted #ececec; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; font-weight: bold; padding: 3px 0px; clear: both; text-align: left; margin-bottom: 10px; margin-top: 30px; } .testo_stampa, .testo_stampa a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; } .row_campo_stampa { float: left; background-color: #FFFFFF; text-align: left; margin-left: 5px; padding-top: 1px; width: 330px; } .row_stampa { float: left; width: 500px; background-color: #FFFFFF; margin-bottom: 3px; } .box_titolo_carrello_stampa { float: left; width: 500px; height: 20px; background-color: #F4F4F4; } .box_titolo_prodotto_carrello_stampa { float: left; width: 327px; text-align: left; } .box_titolo_importo_carrello_stampa { float: left; width: 70px; text-align: right; } .box_prodotto_carrello_stampa { float: left; width: 510px; margin: 5px 0px; /*padding: 5px 0px;*/ height: 30px; } .box_titolo_qty_carrello_stampa { float: left; width: 70px; text-align: right; } .box_dettaglio_prodotto_carrello_stampa { float: left; width: 330px; text-align: left; height: auto; margin-bottom: 5px; } .immagine_prodotto_carrello_stampa { float: left; width: 100px; height: 121px; padding: 1px; border: #E4E4E4 1px solid; } .box_descrizione_prodotto_carrello_stampa { float: left; width: 190px; margin-left: 5px; margin-top: 10px; } .box_importo_stampa { float: left; width: 70px; text-align: right; line-height: 30px; } .box_qty_stampa { float: left; width: 70px; text-align: right; line-height: 30px; } .row_titolo { float: left; width: 150px; background-color: #F0F0EE; text-align: right; padding: 5px 5px; border-bottom: 1px solid #E9E9E9; border-right: 1px solid #E9E9E9; } .color_C8C8C8 { color: #C8C8C8; } .color_2c2c2c { color: #2c2c2c; } .button3 { background: none repeat scroll 0 0 #E4E4E4; color: #2C2C2C; display: inline-block; font-size: 14px; line-height: 22px; padding: 11px 14px; text-transform: uppercase; border: 0px; cursor: pointer; } </style> </head> <body> <form id="Form1" runat="server"> <div style="width: 500px; background-color: #FFF;" id="dvPrint"> <div class="titolo_pagina_stampa" style="width: 400px;"> Ordine </div> <div style="float: left; margin-top: 20px; width: 100%; text-align: left;" class="testo_stampa"> <div class="row_stampa"> <div class="row_titolo"> Codice Ordine </div> <div class="row_campo_stampa"> <asp:Literal ID="lCodiceOrdine" runat="server"></asp:Literal> </div> </div> <div class="row_stampa"> <div class="row_titolo"> Data Ordine </div> <div class="row_campo_stampa"> <asp:Literal ID="lDataOrdine" runat="server"></asp:Literal> </div> </div> <asp:Panel ID="dvDataSpedizione" CssClass="row_stampa" runat="server"> <div class="row_titolo"> Data Sedizione </div> <div class="row_campo_stampa"> <asp:Literal ID="lDataSpedizione" runat="server"></asp:Literal> </div> </asp:Panel> <div class="row_stampa"> <div class="row_titolo"> Modalità di Pagamento </div> <div class="row_campo_stampa"> <asp:Literal ID="lModalitaPagamento" runat="server"></asp:Literal> </div> </div> <div class="row_stampa"> <div class="row_titolo"> Stato </div> <div class="row_campo_stampa"> <asp:Literal ID="lStatus" runat="server"></asp:Literal> </div> </div> </div> </div> <div style="width: 500px; line-height: 30px;"> <div class="row_stampa" style="margin-top: 40px;"> <div class="row_campo_stampa"> <button id="btnPrint" class="button3"> Print</button> <button id="btnClose" class="button3"> Chiudi</button> </div> </div> </div> </form> </body> </html> <script type="text/javascript"> $(document).ready(function () { $('#dvPrint').printElement(); $('#btnPrint').click(function () { $('#dvPrint').printElement(); }); $('#btnClose').click(function () { window.close(); }); }); </script>
Grazie mille

Rispondi quotando