web-dev-qa-db-fra.com

Comment imprimer le contenu HTML en cliquant sur un bouton, mais pas la page?

Je souhaite imprimer du contenu HTML lorsque l'utilisateur clique sur un bouton. Une fois que l'utilisateur a cliqué sur ce bouton, la boîte de dialogue d'impression du navigateur s'ouvre, mais la page Web n'est pas imprimée. Au lieu de cela, il imprimera le contenu HTML qui n’est pas affiché sur la page.

En posant cette question, peu de solutions me viennent à l’esprit. Mais je ne suis pas sûr si ce sont de bonnes idées ou quelque chose de mieux peut être fait. L'une de ces solutions est la suivante: je peux conserver ce contenu HTML dans un div et le rendre display: à imprimer, mais display: none à l'écran. Tous les autres éléments de la page Web peuvent être créés dans display: none pour l’impression et display: pour l’écran. Et appelez ensuite pour imprimer.

Une meilleure idée?

javascripthtmlcssprinting
93
Debiprasad

Je suis tombé sur une autre solution élégante pour cela:

Placez votre partie imprimable dans une div avec un identifiant comme celui-ci:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Créons maintenant 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: SO réponse

135
asprin

Voici une version pure css

.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>
86
2ne

Selon ce SO lien vous pouvez imprimer un div spécifique avec

w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerH‌​TML);
w.print();
w.close();
59
Jaay

Je veux voir ça

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>
10
Panchal Deep

Le code ci-dessous 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>
7
Butani Vijay

Si vous ajoutez et supprimez innerHTML, tous les scripts javascript, css et plus seront chargés deux fois, et les événements seront déclenchés deux fois (ce qui m'est arrivé), il vaut mieux masquer 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:''});
}

Le div "site-container" contient tout le site, vous pouvez donc appeler la fonction comme suit:

printDiv('.someDiv');
2
Alejo JM