web-dev-qa-db-fra.com

Comment imprimer la division sélectionnée à la place de la page complète

J'ai deux divs: div1 et div2.

Conserver les styles css d'origine appliqués à l'élément div2 en cours d'impression.

Je ne veux pas imprimer le contenu à l'intérieur de div1 mais seulement à l'intérieur de div2.

Comment imprimer?

javascriptjqueryjquery-plugins
12
Bharanikumar

Essaye ça

<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
37
Bhanu Prakash Pandey

En utilisant la solution suivante, vous pouvez imprimer le contenu spécifique de votre page Web si vous ne souhaitez pas imprimer votre page entière.

<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('', 'new 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="yourdiv">
    Div you want to print. 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" onclick="PrintElem('#yourdiv')" />

</body>
</html>

Démo en direct

19
Hardik
<script type="text/javascript">
    function printDiv() {    
    var printContents = document.getElementById('Your printable div').innerHTML;
    var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
    }
</script>
4
Gopinath

Vous ne pouvez imprimer qu'une page entière et non pas une page. Il existe donc deux options: vous pouvez copier le contenu d’un élément dans une nouvelle page et l’imprimer ou empêcher l’impression de l’autre élément.

Vous pouvez utiliser un css multimédia pour masquer un élément de l'impression. Exemple:

@media print {

   .div1 { display: none; }

}
3
Guffa

Consultez le plugin jqPrint pour jQuery: http://plugins.jquery.com/project/jqPrint

2
Vinblad

Utilisez PrintArea jQuery Plugin pour imprimer un contenu div spécifique. J'ai trouvé le guide d'intégration facile à partir d'ici - Comment imprimer une zone spécifique de la page Web à l'aide de jQuery

Vous n'avez besoin que du code suivant pour utiliser PrintArea jQuery Plugin.

<script>
$(document).ready(function(){
    $("#printButton").click(function(){
        var mode = 'iframe';
        var close = mode == "popup";
        var options = { mode : mode, popClose : close};
        $("div.printableArea").printArea( options );
    });
});
</script>
0
JoyGuru
.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }

function classToggle() {
  $('#div1').addClass('class-toggle');
}

classToggle();

Ensuite, vous pouvez jouer avec le gestionnaire d’événements pour gérer quand et comment vous voulez Imprimer le résultat.

0
RickShaw

Moyen facile

@media print {
    body > div { display:none; }
    body .div { display:block; }
}
0
Cenk YAGMUR

Vous pouvez aussi le faire en utilisant jQuery:

<script>
function printArea(){
    $('body').css('visibility', 'hidden');
    $('.div2').css('visibility', 'visible');
    window.print();
}
</script>
0
Anirban Das