B/S架构下Js+css非报表工具的轻量级实现票据套打

结合网上的一些知识 感觉这个东西功能还是很强大的
不多说 说明跟代码都在这里:
我的第一篇博客
<!--
本方法采用Javascript+css非报表工具的轻量级实现票据套打 可跨不同浏览器IE、Firefox、Chrome等
原理:将票据作为table的背景元素(这样便于实现打印预览)
采用表格定位样式 数据来源:可以是数据库
最重要的是采用js设置打印区域 实现打印制定区域的元素
-->
<!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">

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

<style type="text/css" media="screen">
.td_table{
background: url(bill.png) no-repeat; /*背景图片取bill.png media="screen"只显示在屏幕 图片大小:607px*261px */
}
</style>

<style type="text/css" media="print">
.td_table{
background-image: url();/*如果要打印背景,此处只需指定背景url即可 请不要再添加no-repeat属性否则出错*/
}
</style>
<style type="text/css" media="all">
.td_table{
width:607px; /*背景图片的宽度 + TABLE的cellpadding + cellspacing*/
height:261px; /*背景图片的高度 + TABLE的cellpadding + cellspacing*/
table-layout:fixed;
margin: 0 auto;
}
body,td,th {
font-size: 12px;
}
</style>
<!--
media的取值 :screen 屏幕; print 打印机; all 全部. 如果不指定media的值, 则默认是all.
我们要实现的套打,其实就是屏幕显示的是完整的内容,而打印出来的,只是某些预定位置的内容。 这正是应用了 media 这个属性。
-->
<script language=javascript>
//打印指定区域内容
function preview() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
</head>

<body>


<div align="center"> <input name="print" type="button" onClick="preview()" value=" 打 印 "></div>


<!--startprint-->

<table border="0" align="center" cellpadding="1" cellspacing="0" class="td_table">
<tr height="39">
<td> </td>
</tr>
<tr height="20px">
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="82"> </td>
<td width="148">国家电网</td>
<td width="53">2011</td>
<td width="31">03</td>
<td width="291">16</td>
</tr>
</table></td>
</tr>
<tr height="19px">
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" align="right"> </td>
<td width="29%">张三</td>
<td width="21%">0018225556</td>
<td width="35%">南昌市火炬大街100号</td>
</tr>
</table></td>
</tr>
<tr height="19px">
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" align="right"> </td>
<td width="29%">200</td>
<td width="21%">10</td>
<td width="35%">1个月</td>
</tr>
</table></td>
</tr>
<tr height="90px" valign="top">
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%"> </td>
<td width="90%"> </td>
</tr>
</table></td>
</tr>
<tr height="19px">
<td><table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td width="14%"> </td>
<td width="46%">壹佰伍拾肆圆整</td>
<td width="21%">154</td>
<td width="19%">56</td>
</tr>
</table></td>
</tr>
<tr height="33px" valign="top">
<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%"> </td>
<td width="90%">无</td>
</tr>
</table></td>
</tr>
<tr valign="top">
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="13%"> </td>
<td width="30%">易伟思信息技术有限公司</td>
<td width="38%">火炬大街营业厅</td>
<td width="19%">李四</td>
</tr>
</table></td>
</tr>
</table>

<!--endprint-->

</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值