Solved

Printing a Web Page

Posted on 2004-10-26
2,286 Views
Last Modified: 2012-05-05
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
0
Question by:BlueEdger
    9 Comments
     
    LVL 22

    Assisted Solution

    by:CJ_S
    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
     
    LVL 28

    Assisted Solution

    by:mmarinov
    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
     
    LVL 5

    Assisted Solution

    by:LindzK
    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
     
    LVL 1

    Author Comment

    by:BlueEdger
    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
     
    LVL 22

    Expert Comment

    by:CJ_S
    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
     
    LVL 17

    Accepted Solution

    by:
    <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
     
    LVL 17

    Expert Comment

    by:AerosSaga
    first one prints a div

    second one prints a page

    third one prints a textbox
    0
     
    LVL 1

    Author Comment

    by:BlueEdger
    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
     
    LVL 17

    Expert Comment

    by:AerosSaga
    Glad I could be of some assistance BlueEdger;)

    Aeros
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: MongoDB Object-Document Mapper for NodeJS

    NodeJS (JavaScript on the server) is awesome, but some developers get confused about NoSQL when it comes to working in Node with MongoDB (NoSQL database). Do you need a better explanation of how to use Node.js with MongoDB? The most popular choice is the Mongoose library.

    In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
    In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
    With the advent of Windows 10, Microsoft is pushing a Get Windows 10 icon into the notification area (system tray) of qualifying computers. There are many reasons for wanting to remove this icon. This two-part Experts Exchange video Micro Tutorial s…
    Hi everyone! This is Experts Exchange customer support.  This quick video will show you how to change your primary email address.  If you have any questions, then please Write a Comment below!

    913 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now