利用JavaScript实现打印(Web打印)

studyjs_007 2011-05-03 11:20:14
JS打印函数：
<a href="#" onClick="window.print()">打印</a>

打印的内容控制是不是像【孟子E章】（谢谢），说的那样：
<html>
<head>
<style type="text/css" media=print>
.noprint{display : none }
</style>
</head>
<body>
<div class="noprint">不打印的部分</div>
<div>打印的部分</div>
<div class="noprint">不打印的部分</div>
</body>
</html>

运用上就是这样的：
<html>
<head>
<style type="text/css" media=print>
.noprint{display : none }
</style>
</head>
<body>
<div class="noprint">不打印的部分</div>
<div>
<div style="text-align: center">
<table width="90%" bgcolor="white" class="tableBorder" cellpadding="0" cellspacing="0" align="center">

<tr>
<td style="text-align: center; width: 917px;" align="center">
<div style="text-align:center; margin-left:20px; margin-top:20px;">
<asp:Table ID="Table1" border="1" cellpadding="0" cellspacing="0" runat="server" Width="100%" >
<asp:TableHeaderRow><asp:TableHeaderCell ColumnSpan="15">基本信息</asp:TableHeaderCell></asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell Width="62">姓名：</asp:TableCell>
<asp:TableCell Width="62">
<asp:Label ID="username" runat="server" Text="Label"></asp:Label></asp:TableCell>
<asp:TableCell Width="62">职工编号：</asp:TableCell>
<asp:TableCell Width="62">
<asp:Label ID="usernum" runat="server" Text="Label"></asp:Label></asp:TableCell>
<asp:TableCell Width="62">出生日期：</asp:TableCell>
<asp:TableCell Width="62">
<asp:Label ID="userbirthdate" runat="server" Text="Label"></asp:Label></asp:TableCell>
<asp:TableCell Width="62">
性别：</asp:TableCell>
<asp:TableCell Width="62">
<asp:Label ID="usersex" runat="server" Text="Label"></asp:Label></asp:TableCell>
<asp:TableCell Width="62">民族：</asp:TableCell>
<asp:TableCell Width="62">
<asp:Label ID="usernation" runat="server" Text="Label"></asp:Label></asp:TableCell>
<asp:TableCell Width="62">在册标识：</asp:TableCell>
<asp:TableCell Width="62">
<asp:Label ID="usermark" runat="server" Text="Label"></asp:Label></asp:TableCell>
<asp:TableCell Width="62">介绍人：</asp:TableCell>
<asp:TableCell Width="62">
<asp:Label ID="userintro" runat="server" Text="Label"></asp:Label></asp:TableCell>
<asp:TableCell >
<asp:Label ID="probationtime" runat="server" Text="Label"></asp:Label></asp:TableCell>
</asp:TableRow>



<asp:TableHeaderRow><asp:TableHeaderCell ColumnSpan="15">扩展信息</asp:TableHeaderCell></asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell>教<br />育<br />简<br />历</asp:TableCell>
<asp:TableCell ColumnSpan="14">

<asp:GridView ID="eduresume" runat="server" Width="100%" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="QSRQ" HeaderText="起始日期"/>
<asp:BoundField DataField="ZZRQ" HeaderText="终止日期"/>
<asp:BoundField DataField="BYYX" HeaderText="毕业院校"/>
<asp:BoundField DataField="SXZY" HeaderText="所学专业"/>
<asp:BoundField DataField="XZ" HeaderText="学制"/>
<asp:BoundField DataField="BYFS" HeaderText="毕业方式"/>
<asp:BoundField DataField="BZ" HeaderText="备注"/>
</Columns>
</asp:GridView>



</asp:TableCell>
</asp:TableRow>

</asp:Table>
</div>

</td>
</tr>

</table>
</div>
<div class="noprint">不打印的部分</div>
</body>
</html>

是这样的吗？？？要打印的是内置有GridVIew的Table控件。。。
...全文
179 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
Fish 2011-08-10
  • 打赏
  • 举报
 回复

看需求吧
sswp7 2011-05-07
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 wxr0323 的回复:]

JS控制打印
[/Quote]

学习了。。。
Lucky41 2011-05-03
  • 打赏
  • 举报
 回复
原文地址
Lucky41 2011-05-03
  • 打赏
  • 举报
 回复
onClick="window.print()" 是打印页面所有内容的 只想打印部分内容的话试试下面这段js吧

<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>

<input name="b_print" type="button" onClick="printdiv('div_print');" value=" Print ">

<div id="div_print">
要打印的内容
</div>
mayanly 2011-05-03
  • 打赏
  • 举报
 回复 
<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style>

.tdp

{

    border-bottom: 1 solid #000000;

    border-left:  1 solid #000000;

    border-right:  0 solid #ffffff;

    border-top: 0 solid #ffffff;

}

.tabp

{

    border-color: #000000 #000000 #000000 #000000; 

    border-style: solid; 

    border-top-width: 2px; 

    border-right-width: 2px; 

    border-bottom-width: 1px; 

    border-left-width: 1px;

}

</style>

</head>



<body onbeforeprint="printsub.style.display='none';" onafterprint="printsub.style.display='';">

<center><input type=button name="printsub" value=" 打印 " onclick="self.print();"><br></center>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0"  class="tabp">

  <tr align="center"> 

    <td height="25" colspan="3" class="tdp"><strong>计算机世界开发者俱乐部</strong></td>

  </tr>

  <tr> 

    <td width="31%" height="26" align="center" class="tdp">PHP版</td>

    <td width="34%" align="center" class="tdp">DELPHI版</td>

    <td width="35%" align="center" class="tdp">JAVA版</td>

  </tr>

  <tr> 

    <td height="40" colspan="3" class="tdp"><p>一段很小但很实用的CSS打印样式。一般带背景的表格在打印的时候，页面上看到的格线实际却打印不出来。其实不是打印不出来，是需要在打印的时候选择"打印背景"。1般不可能要求用户必须做这步。但用样式表"画"出来的格线在打印的时候就能得到"所见即所打"的效果。这效果当然不能和专业的打印控件如"水晶报表"想比，但满足普通的需求还是能够胜任的。</p></td>

  </tr>

  <tr> 

    <td height="59" colspan="3" class="tdp">但在打印的时候，"打印"按纽不能被打印出来，所以就在<body>里用两个事件来控制它，这步很重要。</td>

  </tr>

  <tr> 

    <td height="59" colspan="3" class="tdp">在使用这两个样式时，1个是让<table>的class="tabp",然后再它下面的每个<td>的class="tdp"，<tr>不需要指定。记住，每个<td>都要指定一下。。。。</td>

  </tr>

  <tr>

    <td height="59" colspan="3" class="tdp">打印效果如图：（打印出的东东不包括菜单，只有下面的内容）：</td>

  </tr>

</table>

</body>

</html>

行不行自己得试验下。
子夜__ 2011-05-03
  • 打赏
  • 举报
 回复
JS控制打印
sswp7 2011-05-03
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 lucky41 的回复:]

onClick="window.print()" 是打印页面所有内容的 只想打印部分内容的话试试下面这段js吧

<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "<……
[/Quote]

不错啊。。。
sswp7 2011-05-03
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 net_lover 的回复:]

class="noprint"给不要打印的内容上设置，剩下的就是要打印的内容
[/Quote]

是这样吗？？？
孟子E章 2011-05-03
  • 打赏
  • 举报
 回复
class="noprint"给不要打印的内容上设置，剩下的就是要打印的内容
java源码包---java 源码 大量 实例
JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML浏览器...
HTML+JavaScript实现连续打印
实现原理，首先选中需要打印的数据，记录下ID存入session中。  参数传递并不是难点，难点在于连续... JavaScript打印完毕一个页面之后还要打印下一个页面。但是为了防止页面跳转过快而没有打印内容的情况，这里使...
JavaScript Web开发教程
你能获得： 掌握JavaScript的基础语法、高级语法、对象使用、函数调用、浏览器对象的使用、DOM对象的使用、网页开发，后续的Vue3\Ant Design\ElementUi 都是必须用到的。 教学服务： 实战驱动远程协助课后答疑教辅...
TSC打印机，利用javascript实现连续扫码自动打印，配置说明
TSC打印机，利用javascript打印配置说明 页面预览： 页面代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
web前端利用javascript打印“九九乘法表”
简单用js实现九九乘法表的打印，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>九九乘法表</title> </head> <body> <h3>...
.NET社区

62,039

社区成员

669,051

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章