Powiedzmy, że mamdiv przy drukowaniu
<div id="printOnly">
<b>Title</b>
<p>
Printing content
</p>
</div>
Czy to możliwe, aby ukryć ten dział podczas renderowania strony i pokazać tylko podczas drukowania DIV?
Trzeba trochę CSS dla tego
#printOnly {
display : none;
}
@media print {
#printOnly {
display : block;
}
}
można podłączyć zewnętrznego arkusza stylów CSS z atrybutem media="print":
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Należy użyć zapytania mediów.
W twoim przypadku:
#printOnly {
display: none;
}
@media print {
#printOnly {
display: block;
}
}
PS spojrzeć tutaj http://www.joshuawinn.com/css-print-media-query/ wsparcia przeglądarki
Myślę, że najlepszym rozwiązaniem byłoby stworzenie owijkę wokół zakaz druku rzeczy:
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
/*for printer*/
@media print {
#printOnly { }
/* write your css rules*/
}
/*for desktop*/
@media screen {
#printOnly { display: none;}
/*for all display view*/
}
@media screen { #printOnly:{display:none;} }
@media print{ #printOnly:{display:block;} }
Trzeba zapytania mediów do przełączania pomiędzy opcją druku i ekranu
@media screen { /* for screen option*/
p {
font-family: verdana, sans-serif;
font-size: 17px;
}
}
@media print {/ * dla opcji druku */
p {
font-family: georgia, serif;
font-size: 14px;
color: blue;
}
}
możliwy duplikat [Print
tylko? ] (http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only) –