Printing a Web Page

I have a web page with a form on it written in C#.  I have a Print Page button, and when clicked I want the page to redraw the form contents into a nicely formatted table and then send it to print.  Although at the moment I would just be happy to see something printed!!!  Even the print dialogue box!!

Can anybody point me in the right direction of doing this?  I've looked at the System.Drawing.Print namespace but dont fully understand it and I have a feeling I can only use that in windows applications??  Im very confused!!!

Thanks
LVL 1
BlueEdgerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CJ_SCommented:
Indeed. You will have to issue a clientside print command

<a href="#" onclick="window.print();return false;">print</a>

To format the page nicely when printed you can look into printer stylesheets. Which is basically a .css page which contains the css code you want to print the page. Then add the stylesheet with the fllowing html line
<link rel="stylesheet" href="yourstylesheet_print.css" type="text/css" media="print" />
0
mmarinovCommented:
Hi BlueEdger,

when you use web application the practice is:

1. open a new window with printed friendly version page
2. onclik ( client script ) of the button is calling window.print() method wich will print the page

Regards!
B..M
0
LindzKCommented:
CJ is right - useing a style sheet to set the media is a good idea - that way you only need one page, it will just print differenltly from how you see it on the screen.  

You can combine screen and print media in the same style sheet - below is an exerpt taken from w3schools

The @media Rule
The @media rule allows different style rules for different media in the same style sheet.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head><body>....</body>
</html>


Using this, you could set the style for items such as buttons and other things you don't want to display in the printed version to have it's visibility set to hidden. in it's @media print section, but the @media screen section of the style sheet for the same item, would have it's visibility set to visible.



0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

BlueEdgerAuthor Commented:
OK thanks guys.   I was hoping to be able to do this more programatically - but like so many things in .NET Im finding its just not possible yet!!! I guess its still early days, so I'll resort back to the old classic ASP techniques.  Thanks for confirming this though, all your comments are helpful and I'll award points shortly.
0
CJ_SCommented:
Just remember that ASP.net generates an HTML page, and can not directly talk with other .Net services, except through a roundtrip / postback. Also, make a good distinction between client side and server side issues.
0
AerosSagaCommented:
<div id="printReady">
<p>Hello World! Your Printable Page Content Goes Here</p>
</div>

<script language="JavaScript">
var gAutoPrint = true; // Flag for whether or not to automatically call the print function

function printSpecial()
{
      if (document.getElementById != null)
      {
            var html = '<HTML>\n<HEAD>\n';

            if (document.getElementsByTagName != null)
            {
                  var headTags = document.getElementsByTagName("head");
                  if (headTags.length > 0)
                        html += headTags[0].innerHTML;
            }
            
            html += '\n</HE>\n<BODY>\n';
            
            var printReadyElem = document.getElementById("printReady");
            
            if (printReadyElem != null)
            {
                        html += printReadyElem.innerHTML;
            }
            else
            {
                  alert("Could not find the printReady section in the HTML");
                  return;
            }
                  
            html += '\n</BO>\n</HT>';
            
            var printWin = window.open("","printSpecial");
            printWin.document.open();
            printWin.document.write(html);
            printWin.document.close();
            if (gAutoPrint)
                  printWin.print();
      }
      else
      {
            alert("Sorry, the print ready feature is only available in modern browsers.");
      }
}

</script>

Test Link:
<a href="javascript:void(printSpecial())">Print this Page</a>  

Test Button
<form id="printMe" name="printMe">
  <input type="button" name="printMe" onClick="printSpecial()" value="Print this Page">
</form>  
  ------------------------------------------------------------------------------------------------------------
In the <head> section of your aspx page, add the following:

<script>
function doPrint() {
  window.print();
}

document.all[ 'MyButtonNameGoesHere' ].onclick = doPrint;
</script>
--------------------------------------------------------------------------------------------------------------------
To test it, create a new ASPX page, and paste the script below in to the HEAD section, then create a textbox called TextBox1, make it multiline, and put the following hyperlink below it:

    <a href="javascript:void(printSpecial('TextBox1'))">Print this Textbox</a>

Browse the page, enter some text, click on the link and voila! It opens in a new window and asks you which printer to use. Cool.

If you change the name of the textbox, just change 'TexBox1' in the hyperlink.




          <script language="JavaScript">
var gAutoPrint = true; // Flag for whether or not to automatically call the print function

function printSpecial(TextBoxName)
{
     if (document.getElementById != null)
     {
          var html = '<HTML>\n<HEAD>\n';

          if (document.getElementsByTagName != null)
          {
               var headTags = document.getElementsByTagName("head");
               if (headTags.length > 0)
                    html += headTags[0].innerHTML;
          }
         
          html += '\n</HE' + 'AD>\n<BODY>\n';
         
          var printReadyElem = document.getElementById(TextBoxName);
         
          if (printReadyElem != null)
          {
                    html += printReadyElem.innerHTML.replace(new RegExp("\n", "g"),"<br>");
          }
          else
          {
               alert("Could not find the printReady section in the HTML");
               return;
          }
               
          html += '\n</BO' + 'DY>\n</HT' + 'ML>';
         
          var printWin = window.open("","printSpecial");
          printWin.document.open();
          printWin.document.write(html);
          printWin.document.close();
          if (gAutoPrint)
               printWin.print();
     }
     else
     {
          alert("Sorry, the print ready feature is only available in modern browsers.");
     }
}

          </script>
--------------------------------------------------------------------------------------------------------------------------------
Aeros
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AerosSagaCommented:
first one prints a div

second one prints a page

third one prints a textbox
0
BlueEdgerAuthor Commented:
Thanks AerosSaga, that worked a treat.

I've also developed a cheat fix, whereas I have two panels on my page, in the first one the editable form, then in the second one the print version of the form, and a button to toggle between the two.  Its not as clean but it works!!!
0
AerosSagaCommented:
Glad I could be of some assistance BlueEdger;)

Aeros
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.