javascript 如何使用 ASP.net 打印标签中的数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14051221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Print the data in a label using ASP.net?
提问by Vikneshwar
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.
在我的 asp.net 网站中，我需要打印标签内的信息。标签内的信息将来自数据库。标签将包含诸如客户姓名、地址、电话号码等数据。我需要将其打印在一张纸上。
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.
在我的网页上，我有一个按钮和一个 HTML 表格。HTML 表由客户信息组成。对我来说一切正常。我可以得到打印。但我想将打印页面上的数据格式化。前任。居中对齐，有一些字体和字体大小。我不能这样做。
The following is my print preview page
以下是我的打印预览页面
and this my print page
这是我的打印页面
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.
我尝试实施printstyles css，但我无法获得任何结果。
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.
如果有人能帮我做到这一点，那就太好了。
回答by rahul.deshmukh
try this but put you label inside div and give id to the div like 'mydiv' as i am using bellow.
试试这个，但把你的标签放在 div 中，并在我使用波纹管时给 div 像“mydiv”这样的 id。
<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>
回答by hkutluay
This code only prints divcontent.You should add css link or style tag into divToPrint variable.
此代码仅打印内容div。您应该将 css 链接或样式标记添加到 divToPrint 变量中。
Like
喜欢
printWin.document.write('<link rel="stylesheet" type="text/css" href="/style.css">'+ document.getElementById('print'));
回答by Rohit Vyas
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
您需要以这样一种形式创建 HTML 表格结构，其中您的标签放在中心，在顶行放置 oyur 徽标，如下所示
<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>
