Imprimer un contenu de div en utilisant Jquery

je veux imprimer le contenu d'un div en utilisant jQuery. Cette question est déjà posée dans SO, mais je ne trouve pas la bonne réponse.

Ceci 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 il donne une erreur de la console quand le bouton est cliqué:

Uncaught TypeError: $(...).l'impression n'est pas une fonction

mais quand je j'essaie d'Imprimer la page entière en utilisant

window.print();

c'est le travail. Mais je veux seulement imprimer le contenu d'un div particulier. J'ai vu la réponse $("#printarea").print(); dans beaucoup d'endroits, mais cela ne fonctionne pas.

24
demandé sur Deepu Sasidharan 2015-11-16 13:07:34
la source

9 ответов

certaines recherches jQuery ont échoué, donc j'ai déménagé à 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);

}
44
répondu Deepu Sasidharan 2017-10-11 09:27:50
la source

https://github.com/jasonday/printThis

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

Excellent plugin Jquery pour faire exactement ce que votre après

22
répondu CiaranSynnott 2015-11-16 13:11:40
la source

Sans utiliser de plugin, vous pouvez opter cette logique.

$("#btn").click(function () {
    //Hide all other elements other than printarea.
    $("#printarea").show();
    window.print();
});
7
répondu Sanjay Kumar N S 2015-11-16 13:14:03
la source

si vous voulez faire cela sans un plugin supplémentaire (comme printThis), je pense que ça devrait marcher. L'idée est d'avoir un div spécial qui sera imprimé, tandis que tout le reste est caché en utilisant CSS. Cela est plus facile à faire si la div est un enfant direct de l'étiquette de corps, donc vous devrez déplacer ce que vous voulez imprimer à une div comme cela. S commencez Donc par créer un div avec l'id

$("#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 présentes:

@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 le @print styles lors de l' printing classe est présent, c'est que la page doit être imprimée que normalement, si l'utilisateur imprime la page en sélectionnant File -> Print.

6
répondu Anders 2015-11-16 13:30:29
la source

Utilisez cette bibliothèque:Imprimer.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
répondu Naveed Ahmed 2018-03-16 14:23:48
la source

Aucune des solutions ci-dessus ne fonctionne parfaitement.Ils perdent CSS ou doivent inclure / éditer le fichier CSS externe. J'ai trouvé une solution parfaite qui ne perdra pas votre CSS et vous n'aurez pas à éditer/ajouter des CSS externes.

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();
    }
2
répondu BibanCS 2017-11-09 18:34:12
la source

jetez un coup d'oeil à ceci Plugin

Rend votre code -> $('SelectorToPrint').printElement();

1
répondu ahervin 2015-11-16 13:12:08
la source

j'ai essayé toutes les approches non-plugin ici, mais toutes ont fait imprimer des pages vierges après le contenu, ou ont eu 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
répondu Timothy Kanski 2017-02-14 01:02:21
la source

Imprimer uniquement les éléments sélectionnés sur 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
répondu Denis 2017-03-27 16:15:07
la source

Autres questions sur