Click here to Skip to main content
Click here to Skip to main content

Watermark image on page print in ASP.NET

, 20 May 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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

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

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

Now add image into the header of gridview.

<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.

<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)

Share

About the Author

Anup Kumar Verma
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 PinmemberSeishin#20-May-12 22:24 
AnswerRe: [My vote of 1] awful PinmemberAnup Kumar Verma20-May-12 23:20 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411019.1 | Last Updated 20 May 2012
Article Copyright 2012 by Anup Kumar Verma
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid