How to print selected div instead complete page

Question

I have two divs: div1 and div2.

Maintaining the original css styles applied to the div2 element being printed.

I don\'

Answer 1

You can only print a whole page, not part ofg a page. So, there is two options, you can either copy the content of one element into a new page and print that, or prevent the other element from being printed.

You can use a media css to hide one element from printing. Example:

@media print {

   .div1 { display: none; }

}

Answer 2

Use PrintArea jQuery Plugin to print specific div content. I have found the easy integration guide from here - How to print a specific area of the web page using jQuery

You need only the following code to use PrintArea jQuery Plugin.

<script>
$(document).ready(function(){
    $("#printButton").click(function(){
        var mode = 'iframe';
        var close = mode == "popup";
        var options = { mode : mode, popClose : close};
        $("div.printableArea").printArea( options );
    });
});
</script>

Answer 3

Easy way

@media print {
    body > div { display:none; }
    body .div { display:block; }
}

Answer 4

.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }

function classToggle() {
  $('#div1').addClass('class-toggle');
}

classToggle();

Then you can play with event handler to handle how and when you want to print the output.

Answer 5

Have a look at the jqPrint plugin for jQuery: http://plugins.jquery.com/project/jqPrint

Answer 6

Try this

<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>