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 09-08-2008 2:48 PM by NC01. 15 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!

    -- "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, 2:42 PM
    • Posts 31

     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!

    -- "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, 2:42 PM
    • Posts 31

    Tried it too. Still the blank page !! :-( 

  • Re: How to print DIV contents only

    07-17-2008, 1:07 PM
    • Loading...
    • nzamorski
    • Joined on 06-06-2007, 1:04 AM
    • Posts 30

     I tried this code on my website and it works great in Internet Explorer, but does not work in Firefox(same problem as someone else). Did you ever figure out how to make it work in Firefox as well?

    Thanks 

  • Re: How to print DIV contents only

    07-17-2008, 1:43 PM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 3:33 PM
    • Posts 9,403
    • TrustedFriends-MVPs

    Try this:

    <form id="Form1" method="post" runat="server">

     <style media="print">
     .noPrint
     {
      display: none;
     }
     </style>

     <div id="div1">Div #1</div>
     <div id="div2">Div #2</div>
     <div id="div3">Div #3</div>
     <div id="div4">Div #4</div>
     <input type="button" class="noPrint" value="HTML Button" onclick="printDiv('div1');">

    <script type="text/javascript">
    <!--
    function printDiv(divId)
    {
     var divArray = document.getElementsByTagName('div');

     for (var i=0; i<divArray.length; i++)
     {
      divArray[i].style.display = 'none';
     }

     document.getElementById(divId).style.display = 'block';

     window.print();

     for (var i=0; i<divArray.length; i++)
     {
      divArray[i].style.display = 'block';
     }
    }
    // -->
    </script>

    </form>

    NC...

  • Re: How to print DIV contents only

    07-17-2008, 1:58 PM
    • Loading...
    • nzamorski
    • Joined on 06-06-2007, 1:04 AM
    • Posts 30

     That code did not work for me. Ideally I would like to just be able to click the print button and it would take all of the content from the place holder or the div and print it while keeping the formatting(font, size, color).

  • Re: How to print DIV contents only

    07-17-2008, 2:22 PM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 3:33 PM
    • Posts 9,403
    • TrustedFriends-MVPs

    nzamorski:

     That code did not work for me. Ideally I would like to just be able to click the print button and it would take all of the content from the place holder or the div and print it while keeping the formatting(font, size, color).

    Well it certainly worked for me and here is the markup that I used. I'm afraid that I would need more information to tell what your problem is.

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Print Test</title>
    </head>
    <body>

    <form id="Form1" method="post" runat="server">
     <style media="print">
     .noPrint
     {
      display: none;
     }
     </style>
     <div>
      <div>
       <asp:button id="postBackButton" runat="server" text="PostBack"></asp:button>
      </div>
      <div>
       <input type="button" value="HTML Button">
      </div>
      <div id="workDiv">
       workDiv contents
      </div>
      <div>
       <asp:TextBox ID="TextBox1" runat="server">Text</asp:TextBox>
      </div>
     </div>
     <div id="divToPrint">
      divToPrint contents<br>Bla bla bla
     </div>
     <input type="button" class="noPrint" value="Print" onclick="printDiv('divToPrint');">
    </form>

    </body>
    </html>

    <script type="text/javascript">
    <!--
    function printDiv(divId)
    {
     var divArray = document.getElementsByTagName('div');

     for (var i=0; i<divArray.length; i++)
     {
      divArray[i].style.display = 'none';
     }

     document.getElementById(divId).style.display = 'block';

     window.print();

     for (var i=0; i<divArray.length; i++)
     {
      divArray[i].style.display = 'block';
     }
    }
    // -->
    </script>

    By the way, you can't use a PlaceHolder since it exudes no markup.

    NC...

     

  • Re: How to print DIV contents only

    07-17-2008, 2:44 PM
    • Loading...
    • nzamorski
    • Joined on 06-06-2007, 1:04 AM
    • Posts 30

     It worked once I used your markup. Thank you for your help. Do you know an easy way for me to convert that same div tag to a pdf easily with a separate button?

  • Re: How to print DIV contents only

    07-17-2008, 2:51 PM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 3:33 PM
    • Posts 9,403
    • TrustedFriends-MVPs

    The only way that you can convert to PDF is with a third party tool, and they cannot be used client-side (like printing). Most cost money. This one used to be free: http://itextsharp.sourceforge.net/, but I haven't used it in a while, so I don't know if it still is.

    NC..

  • Re: How to print DIV contents only

    07-28-2008, 5:52 AM
    • Loading...
    • mirainc
    • Joined on 07-11-2008, 3:56 AM
    • Posts 153

    Hey blodfox777

    i want to know how do u implement the method in a VB.NET language?

    i too just want to print the content in content placeholder..

     

  • Re: How to print DIV contents only

    07-28-2008, 9:24 AM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 3:33 PM
    • Posts 9,403
    • TrustedFriends-MVPs

    mirainc, you can't do this in VB.NET as this requires client-side functionality and needs to be done in JavaScript. VB.NET provides server-side functionality.

    NC...

  • Re: How to print DIV contents only

    09-08-2008, 1:48 PM
    • Loading...
    • jimmy2552
    • Joined on 09-08-2008, 4:19 PM
    • Posts 4

    The javascript works fine.  However, I receive an error when I try sorting my gridview after clicking on the Print button stating "theForm.__EVENTTARGET' is null or not an object.

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

     Do you have any suggestions on how to fix this situation?

    Thanks.
Page 1 of 2 (16 items) 1 2 Next >
RSS Available