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?
 
AerosSagaConnect With a Mentor Commented:
<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
 
CJ_SConnect With a Mentor Commented:
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
 
mmarinovConnect With a Mentor Commented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LindzKConnect With a Mentor Commented:
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
 
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:
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
All Courses

From novice to tech pro — start learning today.