Comment imprimer du contenu HTML en cliquant sur un bouton, mais pas la page? [dupliquer]
cette question a déjà une réponse ici:
- Print only? 26 réponses
je veux imprimer du contenu HTML, lorsque l'utilisateur clique sur un bouton. Une fois que l'utilisateur clique sur ce bouton, la boîte de dialogue imprimer du navigateur va s'ouvrir, mais il ne sera pas imprimer la page web. Au lieu de cela, il imprimera le contenu HTML qui n'est pas affiché sur la page.
en posant cette question, il y a peu de solutions qui me viennent à l'esprit. Mais je ne suis pas sûr que ce soient de bonnes idées ou que l'on puisse faire quelque chose de mieux. Une de ces solutions est:
Je peux garder ce contenu HTML dans un div et le faire display: à imprimer, mais display: none à l'écran. Tous les autres éléments sur la page Web peuvent être faits à display: none pour imprimer et display: pour l'écran. Et ensuite appeler pour imprimer.
une meilleure idée?
6 réponses
je suis tombé sur une autre solution élégante pour cela:
Placez votre partie imprimable à l'intérieur d'un div avec un id comme ceci:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
maintenant, créons un javascript vraiment simple:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
SOURCE : AFIN de Répondre à
Voici une version CSS pure
.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>Selon cette SORTE de lien , vous pouvez imprimer un spécifique div avec
w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
w.print();
w.close();
Je Veux Voir Ce
exemple http://jsfiddle.net/35vAN /
<html>
<head>
<script type="text/javascript" src="http://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>
Ci-Dessous Le Code Peut Vous Aider:
<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>
si vous ajoutez et supprimez l'innerHTML, tout javascript, css et plus seront chargés deux fois, et les événements vont tirer deux fois (m'est arrivé), est mieux cacher le contenu, en utilisant jQuery et css comme ceci:
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:''});
}
div "place-container" contiennent tous les sites, de sorte que vous pouvez appeler la fonction comme:
printDiv('.someDiv');