0

Hi I have 5 div tags in my html page and there is a print button. when i click on the print button it has to print only a particular div. for example it has to print the 2nd div which contains some personal information. It should not print the rest of the page. Only the content of the 2nd div should be printed. how to achieve this?

Edited by pritaeas: Moved to HTML/CSS.

3
Contributors
6
Replies
21
Views
3 Years
Discussion Span
Last Post by JorgeM
0

This much of simple answer really does not help. I am not an expert. Can you elobarate how i can do this? if possible an example? becuase of printing i cannot hide the other div's. If so it changes the view in the browser. So can you please help me by explaining in little bit more.

0

ok you mean to say open another window with only the div that should be printed. is it? but is there a way to do without opening a seperate window with only the div that should be printed. Even when all other div's are present.

0

Really very very thanks for pointing to that tutorial. It is really great. Thank you so much.

0

Here's another approach that you can include with media queries..

You can have multiple divs and only print the content of a specific div by having some event fire (probably an onclick event) which will open a new window and pass the contents of that div, and have the printer dialog box open so the user can print..

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>

    function printDiv(data) {
        var printWindow = window.open('','','width=1024,height=768');
        printWindow.document.write('<html><head><title>Demo</title>');
        printWindow.document.write('<link rel="stylesheet" href="style.css" />');
        printWindow.document.write('</head><body>');
        printWindow.document.write($(data).html());
        printWindow.document.write('</body></html>');
        printWindow.print();
        printWindow.close();
        return true;
    }

</script>
</head>
<body>

<div id="div1">Open a window to print the contents of div-1.</div>
<div id="div2">This content will not be printed.</div>
<div id="div3">This content will not be printed.</div>

<input type="button" value="Print Div-1" onclick="printDiv('#div1')" />

</body>
</html>

Results...

21f09f19734cc282561ede00bcd86b2b

Edited by JorgeM

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.