Monday 10 September 2012

How to Print Div data in asp.net using javascript || Print div contents only in asp.net



Introduction: Here we need to print the specific data that is data with in the <div>.Lets go with the following code.
Step 1: Visual studio->new website->right click on solution explorer->add new Item->Default.aspx
 
Step 2: Add the following code to your aspx page
 
Default.aspx:
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
    function printPartOfPage(elementId)
{
 var printContent = document.getElementById(elementId);
 var windowUrl = 'about:blank';
 var windowName = 'Print' + new Date().getTime();
 var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

 printWindow.document.write(printContent.innerHTML);
 printWindow.document.close();
 printWindow.focus();
 printWindow.print();
 printWindow.close();
}
</script>
    <div id="printDiv">
    This is the content in the page to print<br />
        <asp:Label ID="Label1" runat="server" Text="Name">
      
           </asp:Label>&nbsp;&nbsp;&nbsp;&nbsp; <asp:TextBox ID="TextBox1"
            runat="server"></asp:TextBox>
            <br />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333"
            GridLines="None">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="Empno" HeaderText="Empno" SortExpression="Empno" />
                <asp:BoundField DataField="ename" HeaderText="ename" SortExpression="ename" />
                <asp:BoundField DataField="job" HeaderText="job" SortExpression="job" />
                <asp:BoundField DataField="salary" HeaderText="salary"
                    SortExpression="salary" />
                <asp:BoundField DataField="Date of joining" HeaderText="Date of joining"
                    SortExpression="Date of joining" />
            </Columns>
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <SortedAscendingCellStyle BackColor="#FDF5AC" />
            <SortedAscendingHeaderStyle BackColor="#4D0000" />
            <SortedDescendingCellStyle BackColor="#FCF6C0" />
            <SortedDescendingHeaderStyle BackColor="#820000" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:peersConnectionString %>"
            SelectCommand="SELECT * FROM [emp]"></asp:SqlDataSource>
    </div>
    <br />
    <div>
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    </div>
    <input type="button" value="Print" onclick="JavaScript:printPartOfPage('printDiv');" />
    </form>
</body>
</html>

Note: In the above code we are taking two div with different ids but under button click we are calling the div with id 'printDiv'.So when we click on print it prints only the content with the 'printDiv' (the text,label,textbox and gridview not calendar which is under another div)

Now run your application and see output
Demo:
This is the designed page





Click on print button you will find