Print a Webpage with CSS in ASP.Net MVC

In this tutorial we are going to see how to print a webpage which is developed in ASP.Net MVC. The usual problems which we face in printing a webpage is with the rendering of CSS on print version. Also different browsers behave differently while printing pages with background styles and images. We are going to use traditional JavaScript’s window.print() to trigger print functionality.

Lets get started by creating a new ASP.Net MVC4 application.  Lets create a button and handle it’s click event in JQuery as shown below.

<input type="button" id="btnPrint" value="Print this page"/>
@section scripts
{
    <script>
        $(function() {
            $("#btnPrint").click(function() {
                window.print();
            });
        });
    </script>
}

Run the application from Visual Studio and we see below Index page.

image

When we look at the print preview of the page (in Chrome), it will look like below.

image

Now lets take three requirements to showcase how to build CSS through which we will get required styling for print version –

  1. Get a different background color for top panel.
  2. Hide the Bottom panel.
  3. Get a image background for logo.

In the process of creating CSS, we will see what needs to be done to get the print with above three requirements in Chrome, Internet Explorer and Firefox.

First lets create a new CSS file called Print.css and place it along with Site.css under Content folder. Have the following style in Print.css.

@media print {
    body {
        -webkit-print-color-adjust: exact; /* This settings is used to print background color, but only works in Chrome browser*/
    }
    .featured .content-wrapper {
        background-color: greenyellow !important;
        color: #3e5667;
        padding: 20px 40px 30px 40px;
        background-image: -ms-linear-gradient(left, greenyellow 0%, greenyellow 100%);
        background-image: -o-linear-gradient(left, greenyellow 0%, #greenyellow 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, greenyellow), color-stop(1, greenyellow));
        background-image: -webkit-linear-gradient(left, greenyellow 0%, greenyellow 100%);
        background-image: linear-gradient(left, greenyellow 0%, greenyellow 100%);
    }
}

Now lets modify _Layout.cshtml to load different CSS for screen and print. Remove the line @Styles.Render(“~/Content/css”) because we are going to load the styles through following link tags.

<link rel="stylesheet" href="../../Content/Site.css" media="all"/>
<link rel="stylesheet" href="../../Content/Print.css" media="print"/>

media=”print” tells the browser to use specified CSS for printing options, whereas media=”all” will be used to for all devices.

Run the application and look at the print preview in chrome browser.

image

It worked in chrome, now lets see it in Firefox browser. In Firefox to view print preview, do ALT + f –> Print Preview. Print preview will not show background color and our print.css never worked.

For Firefox, we need to set following settings. Open ALT + f –> Print Preview and click on Page Setup….

image

Make sure to select Print Background (colors & images) option.

image

Now open the print preview again and it works as expected by displaying background color.

Lets try now with Internet Explorer browser. In IE to view print preview, do ALT + f –> Print Preview. Print preview will not show background color.

In order to show background colors and images in IE, we need to set following settings. Open ALT + f –> Print Preview and click on Options icon.

image

Make sure to select Print Background Colors and images option.

image

Now open the print preview again and it works as expected by displaying background color.

NOTE: Without the necessary settings in Firefox and Internet Explorer, we cannot get a webpage print with background colors and images. There are other hacky ways to get the background color and images in prints (for example pseudo HTML tags with large borders etc.,), but these approaches are not error proof.

Lets work on our second task, hiding the bottom panel. Lets add the following style to print.css.

    .main-content {
        display: none !important;
    }

When we look at the print view in all three browsers, we will have following output as expected. This way we can get only specific content printed and removing all the extra unwanted styles and content.

image

Now lets complete our final task of getting an image background for logo. Add the following style to our print.css (for demo purpose I am using a dummy image).

    .site-title a {
        background: url(../Images/heroAccent.png) no-repeat 6px center !important;
    }

Now when we look at the print preview in all three browsers we will have following output. This way we can get background images while printing webpages.

image

As we see in this entire tutorial, printing is not a straight forward task. It is dependent on browser settings and application specific print CSS. If we don’t get our CSS right (for example browser and resolution compatible), our print layout will be distorted. One has to carefully plan printable versions of a webpage. It is advisable to use less background images and styling for print versions (as browser settings are not in application’s control).

That’s it for now. Happy Coding and Stay Tuned!!!

You may also like...