Print the Contents of a Div

Print <div id="printarea"></div> only?

Here is a general solution, using CSS only, which I have verified to work.

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Alternative approaches aren't so good. Using display is tricky because if any element has display:none then none of its descendants will display either. To use it, you have to change the structure of your page.

Using visibility works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move section-to-print to the top left so it prints properly.

Print the contents of a DIV

Slight changes over earlier version - tested on CHROME

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

Print a div content using Jquery

Some jQuery research has failed, so I moved to JavaScript (thanks for your suggestion Anders).

And it is working well...

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

}

how to show the contents of a div only in the print file?

You can use css @media print

This will hide all body elements and show only the div #printThis and all its children.

@media print {
    body * {
        visibility: hidden;
    }

    #printThis,  #printThis * {
        visibility: visible;
    }

    #printThis {
        width : 100%;
        height : auto;
        position: absolute;
        left: 0;
        top: 0;
    }
}

js (No need to modify/hide elements. CSS will handle it)

function printDiv( printThis ) {
    window.print();
}

HTML:

<div id="printThis">
    content
</div>
<input type="button" onclick="printDiv('printThis')" value="PRINT" />

Print the contents of a div - with stylesheet

The problem is that newstr contains the content of the div, but the div with the id "divID" itself not. It follows that the #divID css selector won't match to any div-s, so the styles will not be applied.

To fix this the "<div id='divID'>" itself needs to be added, so the fixed function looks following:

function printdiv() {
  var headstr = "<html><head><title>file_name</title></head><body>";
  var footstr = "</body></html>";
  var newstrstyle = document.getElementsByTagName("style")[0].innerHTML; // is this right? -> yes it is
  var newstr = document.getElementById("divID").innerHTML;
  var oldstr = document.body.innerHTML;
  document.body.innerHTML =
    headstr +
    "<style>" +
    newstrstyle +
    "</style>" +
    "<div id='divID'>" + // this div was missing
    newstr +
    "</div>" + // closing the added div
    footstr;
  window.print();
  document.body.innerHTML = oldstr;
  return false;
}

If you want to check a live example, here is the stackblitz code where I figured it out:
https://stackblitz.com/edit/js-madufb?file=index.js

How to print html contents of a div with color styles and images using plain javascript and no jquery

<html>
<head>
  <style>
    #dvContainer {
        background-color: yellow;
    }
    @media print {
        body * {
           visibility: hidden; // part to hide at the time of print
           -webkit-print-color-adjust: exact !important; // not necessary use if colors not visible
        }

        #dvContainer {
           background-color: blue !important;
        }
    }
  </style>
</head>

<body>
    <div id="dvContainer">
        This content needs to be printed.
        <div style="background:limegreen; border:1px solid blue; padding:30px; margin:4%; ">
          Testing the styles inside printed div
          <img src="my-photo.png" width="60px"/>
        </div>
    </div>
    <hr/>
    <button id="printNow" onclick="divPrinting();" > Print now </button>
    <hr/>

    <script type="text/javascript">
      function addStyling(){
        document.style.background = "skyblue";
      }
      function divPrinting(){
      var divContents = document.getElementById("dvContainer").innerHTML; 
            var a = window.open('', '', 'left=40','top=40','height=500', 'width=500'); 
            a.document.write('<html>'); 
            a.document.write('<head> <title> document-printed-by-javascript </title> </head>'); 
            a.document.write('<body>'); 
            a.document.write(divContents); 
            a.document.write('</body></html>'); 
            a.document.close(); 
            a.print();
      }
    </script>

</body>

</html>