Print a div content using Jquery

Question

I want to print the content of a div using jQuery  This question is already asked in SO  but I can t find the correct  working  answer   This is is my HTML    lt div id  printarea  gt       lt p gt This is a sample text for printing purpose  lt  p gt       lt input type  button  id  btn  value  Print  gt   lt  div gt   lt p gt Do not print  lt  p gt    Here I want to print the content of the div printarea    I tried this       btn   click function              printarea   print          But it gives a console error when the button is clicked      Uncaught TypeError         print is not a function   But when I am trying to print the entire page using  window print      it is working  But I only want to print the content of a particular div  I saw the answer     printarea   print    in many places   but this is not working

User · Answer

None of the solutions above work perfectly.They either loses CSS or have to include/edit external CSS file. I found a perfect solution that will not lose your CSS nor you have to edit/add external CSS.

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

User · Answer

First include the header  lt script src  quot https   code jquery com jquery-3 5 1 min js quot  integrity  quot sha256-9 aliU8dGd2tb6OSsuzixeV4y faTqgFtohetphbbj0  quot  crossorigin  quot anonymous quot  gt  lt  script gt     lt script type  quot text JavaScript quot  src  quot https   cdnjs cloudflare com ajax libs jQuery print 1 6 0 jQuery print js quot  gt  lt  script gt   As you are using a print function with a selector which is a part of print js so you need to call them before you use it    Else      window print      will do it    quot  btn quot   click function             quot  printarea quot   print         or    quot  btn quot   on  click  function             quot  printarea quot   print           Learn more  www tenoclocks com

User · Answer

use this library   Print JS  with  this library you can print both HTML and PDF    lt form method  post  action     id  printJS-form  gt            lt  form gt     lt button type  button  onclick  printJS  printJS-form    html    gt      Print Form   lt  button gt

User · Answer

Take a Look at this Plugin  Makes your code as easy as -     SelectorToPrint   printElement

User · Answer

https   github com jasonday printThis      myID   printThis      Great Jquery plugin to do exactly what your after

User · Answer

Without using any plugin you can opt this logic       btn   click function            Hide all other elements other than printarea          printarea   show        window print

User · Answer

Below code from codepen worked for me as I wanted   function printData        var divToPrint document getElementById  printTable       newWin  window open         newWin document write divToPrint outerHTML      newWin print       newWin close          button   on  click  function    printData         Here is a link codepen

User · Answer

lt div id  printarea  gt       lt p gt This is a sample text for printing purpose  lt  p gt    lt  div gt   lt input type  button  id  btn  value  Print  onlick  printDiv    gt   lt p gt Do not print  lt  p gt   function printDiv            var printContents   document getElementById  printarea   innerHTML          var originalContents   document body innerHTML          document body innerHTML   printContents          window print            document body innerHTML   originalContents      This Above function should be load on same page

User · Answer

I tried all the non-plugin approaches here  but all caused blank pages to print after the content  or had other problems   Here s my solution   Html    lt body gt   lt div id  page-content  gt               lt div id  printme  gt Content To Print lt  div gt       lt div gt Don t print this  lt  div gt   lt  div gt   lt div id  hidden-print-div  gt  lt  div gt   lt  body gt    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

User · Answer

Print only selected element on codepen  HTML    lt div class  print  gt    lt p gt Print 1 lt  p gt    lt a href     class  js-print-link  gt Click Me To Print lt  a gt   lt  div gt    lt div class  print  gt    lt p gt Print 2 lt  p gt    lt a href     class  js-print-link  gt Click Me To Print lt  a gt   lt  div gt    JQuery       js-print-link   on  click   function       var printBlock     this  parents   print   siblings   print      printBlock hide      window print      printBlock show

User · Answer

Some jQuery research has failed  so I moved to JavaScript  thanks for your suggestion Anders    And it is working well     HTML   lt div id  DivIdToPrint  gt       lt p gt This is a sample text for printing purpose  lt  p gt   lt  div gt   lt p gt Do not print  lt  p gt   lt input type  button  id  btn  value  Print  onclick  printDiv     gt    JavaScript  function printDiv         var divToPrint document getElementById  DivIdToPrint       var newWin window open     Print-Window       newWin document open       newWin document write   lt html gt  lt body onload  window print    gt   divToPrint innerHTML   lt  body gt  lt  html gt        newWin document close       setTimeout function   newWin close     10

User · Answer

I update this function now you can print any tag or any part of the page with its full style  must include jquery js file   HTML   lt div id  DivIdToPrint  gt       lt p gt This is a sample text for printing purpose  lt  p gt   lt  div gt   lt p gt Do not print  lt  p gt   lt input type  button  id  btn  value  Print  onclick  printtag  DivIdToPrint      gt    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     lt html gt  lt head gt       head   html       lt  head gt                 var allcontent   head     lt body  onload  window print     gt      lt     tagname   attributes     gt      divToPrint     lt      tagname     gt        lt  body gt  lt  html gt                  var newWin window open     Print-Window                newWin document open                newWin document write allcontent               newWin document close                  setTimeout function   newWin close     10

User · Answer

If you want to do this without an extra plugin  like printThis   I think this should work  The idea is to have a special div that will be printed  while everything else is hidden using CSS  This is easier to do if the div is a direct child of the body tag  so you will have to move whatever you want to print to a div like that  S So begin with creating a div with id print-me as a direct child to your body tag  Then use this code to print the 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          The styles you need are these    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        The reason why we should only apply the  print styles when the printing class is present is that the page should be printed as normally if the user prints the page by selecting File - gt  Print

[javascript] Print a div content using Jquery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to printing