Imprimer un contenu de div en utilisant Jquery

Question

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

html javascript jquery printing

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

9 réponses

score 44 · Answer 1

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);

}

score 22 · Answer 2

https://github.com/jasonday/printThis

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

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

score 7 · Answer 3

Sans utiliser de plugin, vous pouvez opter cette logique.

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

score 6 · Answer 4

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.

score 4 · Answer 5

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>

score 2 · Answer 6

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();
    }

score 1 · Answer 7

jetez un coup d'oeil à ceci Plugin

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

score 1 · Answer 8

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;
        }
    }

score 1 · Answer 9

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();
});

Las etiquetas más populares

Imprimer un contenu de div en utilisant Jquery

9 réponses