Ik wil wat HTML-inhoud afdrukken, wanneer de gebruiker op een knop klikt. Nadat de gebruiker op die knop klikt, wordt het dialoogvenster Afdruk van de browser geopend, maar het zal de webpagina niet afdrukken. In plaats daarvan drukt het de andere HTML-inhoud af die niet op de pagina wordt weergegeven.
Tijdens het stellen van deze vraag zijn er maar weinig oplossingen die in mijn gedachten komen. Maar ik weet niet zeker of dat goede ideeën zijn of iets beter kan worden gedaan. Een van die oplossingen is:
Ik kan deze HTML-inhoud in een div houden en het maken display:om af te drukken, maar display: noneTO SCREEN. Alle andere elementen op de webpagina kunnen worden gedaan naar display: nonevoor afdrukken en display:voor het scherm. En bel dan naar afdrukken.
een beter idee?
Antwoord 1, Autoriteit 100%
@media print {
.noPrint{
display:none;
}
}
h1{
color:#f6f6;
}<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>Antwoord 2, Autoriteit 66%
Hier is een pure CSS-versie
.example-print {
display: none;
}
@media print {
.example-screen {
display: none;
}
.example-print {
display: block;
}
}<div class="example-screen">You only see me in the browser</div>
<div class="example-print">You only see me in the print</div>Antwoord 3, autoriteit 43%
Volgens deze SO-linkkunt u een specifieke div afdrukken met
w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
w.print();
w.close();
Antwoord 4, autoriteit 6%
Ik wil dit zien
Voorbeeld http://jsfiddle.net/35vAN/
<html>
<head>
<script type="text/javascript" src="https://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<div>
This will not be printed.
</div>
<div id="anotherdiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />
</body>
</html>
Antwoord 5, autoriteit 6%
De onderstaande code kan u helpen:
<html>
<head>
<script>
function printPage(id)
{
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
</script>
</head>
<body>
<div id="block1">
<table border="1" >
</tr>
<th colspan="3">Block 1</th>
</tr>
<tr>
<th>1</th><th>XYZ</th><th>athock</th>
</tr>
</table>
</div>
<div id="block2">
This is Block 2 content
</div>
<input type="button" value="Print Block 1" onclick="printPage('block1');"></input>
<input type="button" value="Print Block 2" onclick="printPage('block2');"></input>
</body>
</html>
Antwoord 6
Als je de innerHTML toevoegt en verwijdert, worden alle javascript, css en meer twee keer geladen en worden de gebeurtenissen twee keer geactiveerd (is mij overkomen), het is beter om de inhoud te verbergen door jQuery en css als volgt te gebruiken:
function printDiv(selector) {
$('body .site-container').css({display:'none'});
var content = $(selector).clone();
$('body .site-container').before(content);
window.print();
$(selector).first().remove();
$('body .site-container').css({display:''});
}
De DIV “Site-container” bevat alle site, zodat u de functie wilt bellen zoals:
printDiv('.someDiv');