Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Javascript / Scrollbar

Window.print() Print All Div Content Without Scrollbar

Post a Comment
i want to print web page with javascript function window.print() the page include div with scroll bar But printing is displayed only part of the div I tried to add to css @media

Solution 1:

This method will let you print any arbitrary div.

Using jQuery:

function print(selector) {
    var $print = $(selector)
        .clone()
        .addClass('print')
        .prependTo('body');

    //window.print() stops JS execution
    window.print();

    //Remove div once printed
    $print.remove();
}

And some CSS:

body, html {
    width: 100%;
    height: 100%;
}

.print {
     position: fixed;
     overflow: auto;
     width: 100%;
     height: 100%;
     z-index: 100000; /* CSS doesn't support infinity */

     /* Any other Print Properties */
}

Solution 2:

try this

Note:dont give inline style to div 

  <head>
    <style type="text/css">
    .result{ height:200px;overflow:auto;}
    </style>
    <style type="text/css" media="print">
    @media print{ .result{ height:100%;overflow:visible;} } 
    </style>
    <title></title>
  </head>
  <body>
    <div class="result">
      content goes here..
    </div>
    <form>
      <input type="button" value="print" onclick="window.print();" />
    </form>
  </body>

Solution 3:

This is code to print div content using javascript.

 <script language="javascript" type="text/javascript">
    function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;


    }
</script>


<div id="printme" style="width: 100%; background-color: Blue; height: 200px">
    Print me I am in 1st Div
</div>   
<input type="button" value="Print" onclick="javascript:printDiv('printme')" />

Post a Comment for "Window.print() Print All Div Content Without Scrollbar"