How to Print the data in a label using ASP.net?

Question

In my asp.net website i need to print the information that are inside a label. The information inside the label would be derived from the database. The label would consist of data such as the customer name, address, telephone number etc. I need this to be printed on a sheet of paper.

On my webpage i have a button and a HTML table. The HTML table consist of the the customers information. Everything works fine for me. I can get the print. But i would like to get the data on the print page formatted. Ex. center aligned, with some fonts and font sizes. Im not able to do so.

The following is my print preview page enter image description here

and this my print page enter image description here

Its good. But i would like to get the print page a little more stylish with any logos. The size of the text needs to be increased, the table should be rather centered. It would be good if i can get a border for the table in the print page. Basically i would like to do some styles in the print page.

i tried implementing the printstyles css but im unable to get any results.

The code im using during the button click event of the "Print" button is

protected void btnPrint_Click(object sender, EventArgs e)
{

    StringWriter sw = new StringWriter();
    HtmlTextWriter hw = new HtmlTextWriter(sw);
    StringBuilder sb = new StringBuilder();
    sb.Append("<script type = 'text/javascript'>");
    sb.Append("window.onload = new function(){");
    sb.Append("var divToPrint=document.getElementById('print');");
    sb.Append("var printWin = window.open('', '', 'left=0");
    sb.Append(",top=0,width=800,height=600,status=0');");
    //sb.Append("printWin.document.write(<link rel='stylesheet' type='text/css' href='PrintStyle.css' media='print'/>\n);");
    sb.Append("printWin.document.write(divToPrint.outerHTML);");
    sb.Append("printWin.document.close();");
    sb.Append("printWin.focus();");
    sb.Append("printWin.print();}");
    sb.Append("</script>");
    ClientScript.RegisterStartupScript(this.GetType(), "GridPrint", sb.ToString());

}

It would be nice if someone can help me do this.

***"i tried implementing the printstyles css but im unable to get any results."*** - Why don't you show us what you tried... — Blachshma, Dec 27 '12 at 08:05

score 2 · Accepted Answer · answered Dec 27 '12 at 08:54

try this but put you label inside div and give id to the div like 'mydiv' as i am using bellow.

<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script type="text/javascript">

function PrintElem(elem)
{
    Popup($(elem).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();
    mywindow.close();

    return true;
}

</script>
</head>

<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
</div>  
 <input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />
 </body>
 </html>

score 0 · Answer 2 · answered Dec 27 '12 at 07:53

0

This code only prints div content.You should add css link or style tag into divToPrint variable.

Like

   printWin.document.write('<link rel="stylesheet" type="text/css" href="/style.css">'+ document.getElementById('print'));

answered Dec 27 '12 at 07:53

hkutluay

6,794
2
33
53

hkutluay: can u tell more specifically. Im not able to understand. Im not that good with javascript either. – Vikneshwar Dec 27 '12 at 08:03
try to replace commented line on your code with sb.Append("printWin.document.write();"); and check if style is applied on your printed document. – hkutluay Dec 27 '12 at 08:33

score -1 · Answer 3 · answered Dec 27 '12 at 08:03

You need to create the HTML table structure in such a form where your lable put at center and in top row put oyur logo like below

<table width="100%" cellspacing="2" cellpadding="0" style="border: 1px solid black;
    height: 100%;">
    <tr>
        <td colspan="3" align="center">
            Your Logo Comes Here
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td align="center">
            Put Your Lable Here
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            This is Footer
        </td>
    </tr>
</table>

-1: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html. — Bertrand Marron, Dec 27 '12 at 08:09

How to Print the data in a label using ASP.net?

3 Answers3