Comment imprimer le contenu HTML au clic d'un bouton, mais pas la page ?

Question

Comment imprimer le contenu HTML au clic d'un bouton, mais pas la page ?

Demandé el 3 de Juin, 2013: Quand la question a-t-elle été
725105 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Imprimer <div id="printarea"></div> seulement ? (5 réponses )

Je veux imprimer un contenu HTML, lorsque l'utilisateur clique sur un bouton. Lorsque l'utilisateur clique sur ce bouton, la boîte de dialogue d'impression du navigateur s'ouvre, mais elle n'imprime pas la page Web. Au lieu de cela, il imprimera un autre contenu HTML qui n'est pas affiché sur la page.

En posant cette question, quelques solutions me viennent à l'esprit. Mais je ne suis pas sûr que ce soient de bonnes idées ou que quelque chose de mieux puisse être fait. L'une de ces solutions est la suivante : Je peux garder 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 adaptés à l'écran. display: none pour l'impression et display: pour l'écran. Et ensuite appeler pour imprimer.

Une meilleure idée ?

Demandé el 3 de Juin, 2013 par Debiprasad

Answer 1

5 Réponses

Answer 2

126voto

2ne Points 5095

Voici une version purement 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>

Répondu el 3 de Juin, 2013 par 2ne (5095 Points )

Answer 3

86voto

Jaay Points 1409

Según ce lien SO vous pouvez imprimer une division spécifique avec

w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
w.print();
w.close();

Répondu el 3 de Juin, 2013 par Jaay (1409 Points )

Answer 4

11voto

Panchal Deep Points 197

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>

Répondu el 25 de Juillet, 2014 par Panchal Deep (197 Points )

Answer 5

9voto

Butani Vijay Points 1641

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>

Répondu el 3 de Juin, 2013 par Butani Vijay (1641 Points )

Answer 6

2voto

Alejo JM Points 366

Si vous ajoutez et supprimez le innerHTML, tous les javascript, css et autres seront chargés deux fois, et les événements se déclencheront deux fois (cela m'est arrivé), il vaut 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:''});
}

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

printDiv('.someDiv');

Répondu el 4 de Juillet, 2014 par Alejo JM (366 Points )

Comment imprimer le contenu HTML au clic d'un bouton, mais pas la page ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment imprimer le contenu HTML au clic d'un bouton, mais pas la page ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: