Home ›
ASP.NET Forums » General ASP.NET » Client Side Web Development » How to print DIV contents only

How to print DIV contents only

Last post 05-21-2008 12:33 PM by just_life. 5 replies.

Sort Posts:

  • Confused [*-)] How to print DIV contents only

    05-15-2008, 4:43 AM
    • Loading...
    • Wizard!
    • Joined on 03-08-2007, 2:14 PM
    • 127.0.0.1
    • Posts 32

    Hello :)

    I have this situation: I need to print some data, but on the specs of the site, pop-ups are restricted. So I am writing the data in a DIV and raise it in the page dynamically with Javascript. I have tried a lot of methods, however none is printing the correct data. Notice that this html code, works fine in our old site, builded in asp.

     

    In IE:

    First I tried with @media print, using body display:none, and printdiv display:block. It was working on a plain page, until I included the div inside a form. I've tried many things, nothing worked.

    Second, I used visibility:hidden for body. This worked, however I had to move the div in position 0,0 with script. Except that, if the page is long, it prints empty pages.

    On both cases though, the page is printed blurry... like an image. Text is not clear.

     

    In Firefox, with @media print, it does not hide the body, or it hides everything. Same with visibility. When using script to move in position 0,0, it doesn't move.

    On both cases, when div is visible, the text is printed clear.

     

    What am I doing wrong? Is there another concept to achieve this? Most important: Why is printed fuzzy in IE???

    "I know one thing, I know nothing" - Socrates 469bC - 399bC
    Filed under:

  • Re: How to print DIV contents only

    05-20-2008, 1:38 AM
    Answer

    Hi Wizard

    For your information, I suggest you to try the following code to print the DIV contents Which you want to print:

    <html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print(); 
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>

<body>
//HTML Page
//Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt"   onClick="printdiv('div_print');" value=" Print ">

<div id="div_print">

<h1 style="Color:Red">The Div content which you want to print</h1>

</div>
//Other content you wouldn't like to print
//Other content you wouldn't like to print
</body>

</html>

     Hope this helps!

    Regards!
    Lance
    -- "Mark As Answer" If my reply helped you --

  • Re: How to print DIV contents only

    05-20-2008, 3:06 AM
    • Loading...
    • Wizard!
    • Joined on 03-08-2007, 2:14 PM
    • 127.0.0.1
    • Posts 32

     Great!  it worked fine! It prints only what I want, and the printing quality is perfect!

    Thank you very much Big Smile 

     

    Edit:

    I had to change document.all.item(printpage), to document.getElementById(printpage) in order to play correct with all browsers.

    However, Firefox doesn't print it correct. Is seems like it starts printing, AFTER the end of the function, thus printing the page as if no changes have happened... 

    "I know one thing, I know nothing" - Socrates 469bC - 399bC

  • Re: How to print DIV contents only

    05-20-2008, 1:32 PM
    • Loading...
    • just_life
    • Joined on 10-03-2006, 10:42 AM
    • Posts 28

     When I tried it, I got a blank page!!

    I have the undermentioned on myprint.js page

    function printdiv(printpage)
    {
    var headstr = "<html><head><title></title></head><body>";
    var footstr = "</body>";
    var newstr = document.all.item(printpage).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr+newstr+footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
    } 

    on my code page I have:

    <asp:Button ID="PrintAns" runat="server" Style="z-index: 105; position: relative;top: 55px; left:245px;width: 50px" onclick="printdiv('content');" Text="Print" /> 

    where "content" is the div id whose contents I wish to print.

    Could anyone please help in figuring out what I'm doing wrong?

    Thank You 
    Filed under:

  • Re: How to print DIV contents only

    05-20-2008, 10:23 PM

    Hi just_life

    I suggest you try to use "onclientclick" instead of "onclick"

    hope this helps!

    Regards!
    Lance
    -- "Mark As Answer" If my reply helped you --

  • Re: How to print DIV contents only

    05-21-2008, 12:33 PM
    • Loading...
    • just_life
    • Joined on 10-03-2006, 10:42 AM
    • Posts 28

    Tried it too. Still the blank page !! :-( 
Page 1 of 1 (6 items)
RSS Available

Advertise on ASP.NET

About this Site