Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Tip/Trick

Watermark image on page print in ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.67/5 (3 votes)
20 May 2012CPOL1 min read 32.5K   9   2
Printer independent Watermark on webpage print in asp.net & C#

Introduction

It's easy to set watermark on webpages, we have to set body background-image property with y axis-repeat but the problem is backgrounds do not print by default. The user would have to change their browser's print settings. So you should find a different way to show your watermark using text or an <img>element. Here I am going to set watermark image dynamically at the time of page printing with the help of iframe and table.

Background

I have multiple pages of data in the gridview and I have to set watermark image at the time of printing. Most people firstly try to set Background-image property of a body or any control on a page to set watermark. It shows the watermark in the background. But when you print it, it disappears as default print setting removes background images or colors.

Solution  

One of the solution to this problem is to repeat table header on page at the time of print and place a watermark image in the header along with the style "display:table-header-group;" so the watermark will show on each page.  

Using the code

First of the key thing is to repeat header of a gridview on page print. so we have to set following properties to gridview.

C#
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; 

Then another important thing is set a style to gridview thread. 

CSS
<style type = "text/css">
thead 
{
       	display:table-header-group;
}
</style>

Now add image into the header of gridview.

ASP.NET
<asp:TemplateField HeaderText="id">
    <HeaderTemplate>
      <img alt="" src="watermark.jpg" style="z-index:-1;position:absolute"/>ID 
      </HeaderTemplate>
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server" Text='<%# Bind("id") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

I use iframe and div to print the content with watermark.

XML
<div id="divcontents"> 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
......
</div>
<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe>

<script type="text/javascript">
   function ClickHereToPrint(){
    try{ 
         var oIframe = document.getElementById('ifmcontentstoprint');
        var oContent = document.getElementById('divcontents').innerHTML;
        var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
        if (oDoc.document) oDoc = oDoc.document;
		oDoc.write("<html><head><style type = 'text/css'>" + 
		     "thead {display:table-header-group;}</style>");
		oDoc.write("</head><body onload='this.focus(); this.print();'>");
		oDoc.write(oContent + "</body></html>");	    
		oDoc.close(); 	    
    }
    catch(e){
	    self.print();
    }
}

</script>

Just Call the print script to see the magic. 

Points of Interest

Here the property of table's header group is used to repeat watermark image on each and every printed page.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) NIC
India India
I have more then 5 years of experience in the software development sectors with more then 15 softwares in C#, WPF, SQL SERVER, WCF, LINQ, intel perceptual computing sdk, digital signature, snmp.

Comments and Discussions

 
Question[My vote of 1] awful Pin
Seishin#20-May-12 21:24
Seishin#20-May-12 21:24 
1. why grid? why not make it more reusable?
2. this method is somewhat good for displaying but if somebody clicks 'save image as' your method fails.

suggestion: maybe apply the watermark (merge images) to the image when uploading it to the server?!
life is study!!!

AnswerRe: [My vote of 1] awful Pin
Anup Kumar Verma20-May-12 22:20
Anup Kumar Verma20-May-12 22:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.