Tejana

Microsoft LightSwitch Printing Html

Posted in .net, LightSwitch, Microsoft, Software, SQL, Visual Studio by tejana on April 29, 2011

Printing Html offers the sharper resolution of vector graphics overcoming a major short coming  of direct native SilverLight raster printing as discussed in my last post. I am using a LightSwitch Desktop Application. By calling windows internet explorer print method we can by-pass the inferior SilverLight print method.

Setting up a LightSwitch screen with a SilverLight webBrowser control and passing in Html from the database we can engineer one click printing with acceptable resolution. In this exercise I used SQL 2008 as the database so that I can store html in the database using varchar(MAX):

varcharMAX

Otherwise, the LightSwitch application contains one  simple entity with a CreateNew, Search, and Detail Screen like the previous two posts. This is to create a example print button on our Detail Screen:

detailTest

With the print execution code:

        partial void Print_Execute()
        {
            Application.Current.ShowWebBrowser();
        }

Simply showing another screen from our application. This page contains the webBrowser control, for details see Tim Leung’s Blog. Thanks Tim. For this exercise add a New Data Screen with no data, named WebBrowser. Remove this  new screen from Navigation and add a data item to the screen: Property1 as string. Place Property1 on the screen and change the control to custom control to WebBrowser under System.Windows, System.Windows.Control. Be sure to set the Sizing to Stretch and Label Position to None:

 

WebBrowser 

public partial class WebBrowser
{
    string strHtml;

    partial void WebBrowser_Activated()
    {         
        this.FindControl("Property1").ControlAvailable += new EventHandler<ControlAvailableEventArgs>(WebBrowser_ControlAvailable);
    }

    void WebBrowser_ControlAvailable(object sender, ControlAvailableEventArgs e)
    {
        ((System.Windows.Controls.WebBrowser)e.Control).NavigateToString(strHtml);
    }

    partial void WebBrowser_Created()
    {
       strHtml = this.DataWorkspace.TejanaTestData.ReportsHtmls_Single(8).StringHtml;
    }
}

The ‘8’ in DataWorkspace.TejanaTestData.ReportsHtmls_Single is the index of the StringHtml. It took a few tries to get the inner Html the way I wanted. It is not that easy to paste Html into Microsoft SQL Server Management Studio. Thanks to pctechblog, I used notepad++ to strip the new lines from the Html. I inserted into the Html the phrase:  <body onload="window.print()">  in the body of the page. This causes the page to call the windows internet explorer print method immediately upon display.

print

This method produces acceptable print quality:

printZoom

ReportPaging

With good paging, and quick execution. Headers and footers can be controlled  by the user’s Internet Explorer’s Page Setup.  The question is, where did the html come from ? To actually use this method, I would want to be able to generate the Html in code. A start to Html report generation can be found at: The HTML Report Engine which is how I created the example report. This Report Engine Project is nifty, but considering this a base for developing an updated engine for Line of Business reports, sure makes the Report Builder in Reporting Services look nice.

Advertisements

5 Responses

Subscribe to comments with RSS.

  1. dotnettim said, on April 29, 2011 at 3:31 pm

    Excellent article Mike! I like the way you call window.print on the body onload. Very imaginative indeed!

    Tim

  2. peter said, on July 28, 2011 at 8:16 am

    Cool !!

  3. The_Regan said, on January 11, 2012 at 11:22 pm

    This is awesome! Beautiful work! 🙂

  4. Regan Ashworth (@The_Regan) said, on January 11, 2012 at 11:28 pm

    I love this – thank you for sharing it!

    • tejana said, on February 18, 2012 at 6:11 pm

      Thanks Regan, with encouragement like yours I am ready to get back to this.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: