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.
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>
Come risolvo il problema?
Grazie mille