web-dev-qa-db-fra.com

Imprimer un contenu div en utilisant JQuery

Je veux imprimer le contenu d'une div en utilisant jQuery. Cette question est déjà posée dans SO, mais je ne trouve pas la réponse correcte (de travail).

C'est mon HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print'>
</div>
<p>Do not print.</p>

Ici, je veux imprimer le contenu de la div printarea. 

J'ai essayé ceci:

$("#btn").click(function () {
    $("#printarea").print();
});

Mais cela donne une erreur de console quand le bouton est cliqué:

Uncaught TypeError: $ (...). Print n’est pas une fonction

Mais quand j'essaye d'imprimer la page entière en utilisant

window.print();

ça fonctionne. Mais je veux seulement imprimer le contenu d'une div particulière. J'ai vu la réponse $("#printarea").print(); dans de nombreux endroits, mais cela ne fonctionne pas.

javascriptjqueryhtmlprinting
28
Deepu Sasidharan

Certaines recherches sur jQuery ont échoué, je suis donc passé à JavaScript (merci pour votre suggestion Anders ).

Et ça marche bien ...

HTML

<div id='DivIdToPrint'>
    <p>This is a sample text for printing purpose.</p>
</div>
<p>Do not print.</p>
<input type='button' id='btn' value='Print' onclick='printDiv();'>

JavaScript

function printDiv() 
{

  var divToPrint=document.getElementById('DivIdToPrint');

  var newWin=window.open('','Print-Window');

  newWin.document.open();

  newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');

  newWin.document.close();

  setTimeout(function(){newWin.close();},10);

}
53
Deepu Sasidharan

https://github.com/jasonday/printThis

$("#myID").printThis();

Grand plugin Jquery pour faire exactement ce que vous voulez

25
CiaranSynnott

Sans utiliser aucun plugin, vous pouvez opter pour cette logique.

$("#btn").click(function () {
    //Hide all other elements other than printarea.
    $("#printarea").show();
    window.print();
});
7
Sanjay Kumar N S

Si vous voulez faire cela sans un plugin supplémentaire (comme printThis ), je pense que cela devrait fonctionner. L'idée est d'avoir un div spécial qui sera imprimé, tandis que tout le reste est caché en utilisant CSS. C'est plus facile à faire si la div est un enfant direct de la balise body, vous devrez donc déplacer ce que vous voulez imprimer sur une div comme celle-ci. S Commencez donc par créer un div avec id print-me comme enfant direct de votre balise body. Ensuite, utilisez ce code pour imprimer le div:

$("#btn").click(function () {
    //Copy the element you want to print to the print-me div.
    $("#printarea").clone().appendTo("#print-me");
    //Apply some styles to hide everything else while printing.
    $("body").addClass("printing");
    //Print the window.
    window.print();
    //Restore the styles.
    $("body").removeClass("printing");
    //Clear up the div.
    $("#print-me").empty();
});

Les styles dont vous avez besoin sont les suivants:

@media print {
    /* Hide everything in the body when printing... */
    body.printing * { display: none; }
    /* ...except our special div. */
    body.printing #print-me { display: block; }
}

@media screen {
    /* Hide the special layer from the screen. */
    #print-me { display: none; }
}

La raison pour laquelle nous ne devrions appliquer les styles @print que lorsque la classe printing est présente est que la page doit être imprimée normalement si l'utilisateur imprime la page en sélectionnant File -> Print.

7
Anders

utiliser cette bibliothèque: Print.JS

avec cette bibliothèque, vous pouvez imprimer à la fois HTML et PDF.

<form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>
4
Naveed Ahmed

Aucune des solutions ci-dessus ne fonctionne parfaitement. Elles perdent CSS ou doivent inclure/modifier un fichier CSS externe. J'ai trouvé une solution parfaite pour ne pas perdre votre CSS ni modifier/ajouter du CSS externe. 

HTML: 

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p

JQuery:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }
3
BibanCS

Imprimer uniquement l'élément sélectionné sur le codepen

HTML:

<div class="print">
 <p>Print 1</p>
 <a href="#" class="js-print-link">Click Me To Print</a>
</div>

<div class="print">
 <p>Print 2</p>
 <a href="#" class="js-print-link">Click Me To Print</a>
</div>

JQuery:

$('.js-print-link').on('click', function() {
  var printBlock = $(this).parents('.print').siblings('.print');
  printBlock.hide();
  window.print();
  printBlock.show();
});
1
Denis

J'ai essayé toutes les approches non-plug-in ici, mais toutes ont entraîné l'impression de pages vierges après le contenu ou d'autres problèmes. Voici ma solution:

Html:

<body>
<div id="page-content">        
    <div id="printme">Content To Print</div>
    <div>Don't print this.</div>
</div>
<div id="hidden-print-div"></div>
</body>

Jquery:

    $(document).ready(function () {
        $("#hidden-print-div").html($("#printme").html());
    });

Css:

    #hidden-print-div {
        display: none;
    }

    @media print {
        #hidden-print-div {
            display: block;
        }

        #page-content {
            display: none;
        }
    }
1
Timothy Kanski

Le code ci-dessous de codepen a fonctionné pour moi comme je le voulais,

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

Voici un lien codepen

1
Amarja

Jetez un coup d'oeil à ceci Plugin

Rend votre code aussi simple que possible -> $('SelectorToPrint').printElement();

1
ahervin

Je met à jour cette fonction
vous pouvez maintenant imprimer n’importe quel tag ou partie de la page avec son style complet
doit inclure le fichier jquery.js 

HTML

<div id='DivIdToPrint'>
    <p>This is a sample text for printing purpose.</p>
</div>
<p>Do not print.</p>
<input type='button' id='btn' value='Print' onclick='printtag("DivIdToPrint");' >

JavaScript 

        function printtag(tagid) {
            var hashid = "#"+ tagid;
            var tagname =  $(hashid).prop("tagName").toLowerCase() ;
            var attributes = ""; 
            var attrs = document.getElementById(tagid).attributes;
              $.each(attrs,function(i,elem){
                attributes +=  " "+  elem.name+" ='"+elem.value+"' " ;
              })
            var divToPrint= $(hashid).html() ;
            var head = "<html><head>"+ $("head").html() + "</head>" ;
            var allcontent = head + "<body  onload='window.print()' >"+ "<" + tagname + attributes + ">" +  divToPrint + "</" + tagname + ">" +  "</body></html>"  ;
            var newWin=window.open('','Print-Window');
            newWin.document.open();
            newWin.document.write(allcontent);
            newWin.document.close();
           // setTimeout(function(){newWin.close();},10);
        }
0
Akram Elhaddad