利用jquery.print.js实现html打印
2017-03-23 00:00
232 查看
摘要: 最近做的项目，需要table表单录入数据，然后原样打印出来，用了print.js插件实现了打印功能，效果还不错。基本能实现多页连续打印效果。
table表格是纯手工编写，当然也可以用其他工具把word文件转换问html标签，不过自己感觉还是自己动手写表格样式比较稳点，就是很费时间。
关于表格各列的宽度，应该已最大列数宽度来控制Ａ４纸张大小，不然很容易出现超出打印范围。
不说了，贴代码．．．．
table表格是纯手工编写，当然也可以用其他工具把word文件转换问html标签，不过自己感觉还是自己动手写表格样式比较稳点，就是很费时间。
关于表格各列的宽度，应该已最大列数宽度来控制Ａ４纸张大小，不然很容易出现超出打印范围。
不说了，贴代码．．．．
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扦样单</title>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jQuery.print/1.5.1/jQuery.print.js"></script>
<style>
table {
text-align: center;
border-collapse: collapse; /* 边框合并属性 */
table-layout: fixed;
margin: 0px;
padding: 0px;
/*word-wrap:break-word;*/
/*word-break:break-all;*/
/*padding: 0px 0px;*/
/*margin: 0px 0px;*/
}
th {
border: 1px solid #666666;
}
td {
border: 1px solid #666666;
padding: 0px;
margin: 0px;
word-wrap: break-word;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#print").click(function(){
$(".page").print({
append: $('.page2').html()
});
})
});
</script>
</head>
<body>
<div><button id="print">打印</button></div>
<div class="page" style="width: 210mm;height: 297mm;margin: 0 auto;">
<div style="width: 200mm;height: 100%;margin: 0 auto;float: left;">
<form>
<h1 style="text-align: center;">扦样单</h1>
<p style="text-align: right;margin-right: 200px;margin-bottom: 1px;width: 90%;">
编号:兴-1
</p>
<table>
<tr>
<!--style="width: 198.5px;"-->
<!--style="width: 198.5px;"-->
<!--style="width: 198.5px;"-->
<td colspan="2">任务来源</td>
<td colspan="2"></td>
<td colspan="2">任务类别</td>
<td>
</td>
</tr>
<tr>
<td rowspan="8" style="width: 73px;margin: 0px auto;">
<div style="width: 10px;margin: 0 auto;">被抽查单位</div>
</td>
<td>名称</td>
<td colspan="5"></td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="5"></td>
</tr>
<tr>
<td>注册地址</td>
<td colspan="5"></td>
</tr>
<tr>
<td>法定代表人</td>
<td colspan="2"></td>
<td colspan="2">邮政编码</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">联系人</td>
<td rowspan="2" colspan="2"></td>
<td rowspan="2">联系电话</td>
<td>固定</td>
<td>139*******</td>
</tr>
<tr>
<td>移动</td>
<td>188*******</td>
</tr>
<tr>
<td>统一社会信用代码</td>
<td colspan="2"></td>
<td>传真/E-mail</td>
<td colspan="2"></td>
</tr>
<tr>
<td style="width: 153px;">生产经营许可证编号(备案流水号)</td>
<td style="width: 122px;">1</td>
<td style="width: 80px;">发证单位</td>
<td style="width: 108px;"></td>
<td style="width: 82px;">经营类型</td>
<td style="width: 113px;"></td>
</tr>
<tr>
<td rowspan="5">种子经营生产者(进口商或分装单位)信息</td>
<td>名称</td>
<td colspan="5"></td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="5"></td>
</tr>
<tr>
<td>传真/E-mail</td>
<td colspan="2"></td>
<td colspan="2">邮政编码</td>
<td>2</td>
</tr>
<tr>
<td>注册地址</td>
<td colspan="2"></td>
<td rowspan="2">联系电话</td>
<td>固定</td>
<td></td>
</tr>
<tr>
<td>生产经营许可证编号</td>
<td colspan="2"></td>
<td>移动</td>
<td></td>
</tr>
<tr>
<td rowspan="13">受检产品信息</td>
<td>作物种类</td>
<td colspan="2"></td>
<td colspan="2">种子类别</td>
<td></td>
</tr>
<tr>
<td>品种名称及组合</td>
<td colspan="2"></td>
<td colspan="2">种子批号</td>
<td></td>
</tr>
<tr>
<td>包装类型及净含量</td>
<td colspan="2"></td>
<td colspan="2">单元识别码</td>
<td></td>
</tr>
<tr>
<td>包装物密封状态</td>
<td colspan="2"></td>
<td colspan="2">商标</td>
<td></td>
</tr>
<tr>
<td>扦样数量（g）</td>
<td colspan="2"></td>
<td colspan="2">种子批重（kg）</td>
<td></td>
</tr>
<tr>
<td>扦样地点</td>
<td colspan="2"></td>
<td colspan="2">扦样方式</td>
<td></td>
</tr>
<tr>
<td>品种审定编号</td>
<td colspan="2"></td>
<td colspan="2">检疫证明编号</td>
<td></td>
</tr>
<tr>
<td>检测日期</td>
<td colspan="2"></td>
<td colspan="2">质量保证期</td>
<td></td>
</tr>
<tr>
<td>进口种子审批文号</td>
<td colspan="2"></td>
<td colspan="2">引种备案公告文号</td>
<td></td>
</tr>
<tr>
<td>种子批化学处理</td>
<td colspan="2"></td>
<td colspan="2">警示标志</td>
<td>有( )无( )</td>
</tr>
<tr>
<td colspan="6">质量指标标注值</td>
</tr>
<tr>
<td>净度（%）</td>
<td colspan="2">发芽率（%）</td>
<td colspan="2">纯度（%）</td>
<td>水分（%）</td>
</tr>
<tr>
<td> </td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2">是否标注转基因标识</td>
<td colspan="2">是（ ） 否（ ）</td>
<td colspan="2">安全证书编号</td>
<td></td>
</tr>
<tr>
<td rowspan="4">扦样单位</td>
<td>名称</td>
<td colspan="5">美国加利福尼亚</td>
</tr>
<tr>
<td>地址</td>
<td colspan="5">美国加利福尼亚220号</td>
</tr>
<tr>
<td>联系人</td>
<td colspan="2"></td>
<td colspan="2">联系电话</td>
<td>010-50*****</td>
</tr>
<tr>
<td>邮政编码</td>
<td colspan="2">65****4</td>
<td colspan="2">传真/E-mail</td>
<td>022-56****5</td>
</tr>
<tr>
<td rowspan="2">检测项目依据</td>
<td colspan="6">净度___发芽率___纯度___水分___其它___</td>
</tr>
<tr>
<td colspan="6">检验依据：GB/T 3543.1～7-1995等 判定依据：GB 20464-2006等</td>
</tr>
<tr>
<td colspan="7" style="text-align: left;text-indent: 1.5em;">备注（需要说明的其他问题）:</td>
</tr>
<tr>
<td colspan="4" style="height: 100%;text-align: left;padding-left: 10px;">
<p>本次扦样始终在本人陪同下完成，上述记录核对无误。</p>
<p><span>经手人：</span> <span style="margin-left: 240px;">职务</span></p>
<p>年 月 日 （盖章）</p>
</td>
<td colspan="3" style="text-align: left;padding-left: 10px;">
<p>扦样人（签名）：</p>
<p>扦样单位（公章）</p>
<p>扦样日期 年 月 日</p>
</td>
</tr>
</table>
</form>
<p style="text-align: center;">扦样单一式三份，承检机构和被抽查单位各存留一份，报下达任务的农业政主管部门一份。</p>
</div>
<div style="width: 4mm;height:167mm;float: left;padding-top: 130mm;text-align: right;">
第一联<div style="width: 5mm;height:5mm;"></div>种子管理站
</div>
</div>
<div class="page2" style="width: 210mm;height: 297mm;margin: 0 auto;">
<div style="width: 200mm;height: 100%;margin: 0 auto;float: left;">
<form>
<h1 style="text-align: center;">扦样单</h1>
<p style="text-align: right;margin-right: 200px;margin-bottom: 1px;width: 90%;">
编号:兴-1
</p>
<table>
<tr>
<!--style="width: 198.5px;"-->
<!--style="width: 198.5px;"-->
<!--style="width: 198.5px;"-->
<td colspan="2">任务来源</td>
<td colspan="2"></td>
<td colspan="2">任务类别</td>
<td>
</td>
</tr>
<tr>
<td rowspan="8" style="width: 73px;margin: 0px auto;">
<div style="width: 10px;margin: 0 auto;">被抽查单位</div>
</td>
<td>名称</td>
<td colspan="5"></td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="5"></td>
</tr>
<tr>
<td>注册地址</td>
<td colspan="5"></td>
</tr>
<tr>
<td>法定代表人</td>
<td colspan="2"></td>
<td colspan="2">邮政编码</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">联系人</td>
<td rowspan="2" colspan="2"></td>
<td rowspan="2">联系电话</td>
<td>固定</td>
<td>139*******</td>
</tr>
<tr>
<td>移动</td>
<td>188*******</td>
</tr>
<tr>
<td>统一社会信用代码</td>
<td colspan="2"></td>
<td>传真/E-mail</td>
<td colspan="2"></td>
</tr>
<tr>
<td style="width: 153px;">生产经营许可证编号(备案流水号)</td>
<td style="width: 122px;">1</td>
<td style="width: 80px;">发证单位</td>
<td style="width: 108px;"></td>
<td style="width: 82px;">经营类型</td>
<td style="width: 113px;"></td>
</tr>
<tr>
<td rowspan="5">种子经营生产者(进口商或分装单位)信息</td>
<td>名称</td>
<td colspan="5"></td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="5"></td>
</tr>
<tr>
<td>传真/E-mail</td>
<td colspan="2"></td>
<td colspan="2">邮政编码</td>
<td>2</td>
</tr>
<tr>
<td>注册地址</td>
<td colspan="2"></td>
<td rowspan="2">联系电话</td>
<td>固定</td>
<td></td>
</tr>
<tr>
<td>生产经营许可证编号</td>
<td colspan="2"></td>
<td>移动</td>
<td></td>
</tr>
<tr>
<td rowspan="13">受检产品信息</td>
<td>作物种类</td>
<td colspan="2"></td>
<td colspan="2">种子类别</td>
<td></td>
</tr>
<tr>
<td>品种名称及组合</td>
<td colspan="2"></td>
<td colspan="2">种子批号</td>
<td></td>
</tr>
<tr>
<td>包装类型及净含量</td>
<td colspan="2"></td>
<td colspan="2">单元识别码</td>
<td></td>
</tr>
<tr>
<td>包装物密封状态</td>
<td colspan="2"></td>
<td colspan="2">商标</td>
<td></td>
</tr>
<tr>
<td>扦样数量（g）</td>
<td colspan="2"></td>
<td colspan="2">种子批重（kg）</td>
<td></td>
</tr>
<tr>
<td>扦样地点</td>
<td colspan="2"></td>
<td colspan="2">扦样方式</td>
<td></td>
</tr>
<tr>
<td>品种审定编号</td>
<td colspan="2"></td>
<td colspan="2">检疫证明编号</td>
<td></td>
</tr>
<tr>
<td>检测日期</td>
<td colspan="2"></td>
<td colspan="2">质量保证期</td>
<td></td>
</tr>
<tr>
<td>进口种子审批文号</td>
<td colspan="2"></td>
<td colspan="2">引种备案公告文号</td>
<td></td>
</tr>
<tr>
<td>种子批化学处理</td>
<td colspan="2"></td>
<td colspan="2">警示标志</td>
<td>有( )无( )</td>
</tr>
<tr>
<td colspan="6">质量指标标注值</td>
</tr>
<tr>
<td>净度（%）</td>
<td colspan="2">发芽率（%）</td>
<td colspan="2">纯度（%）</td>
<td>水分（%）</td>
</tr>
<tr>
<td> </td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2">是否标注转基因标识</td>
<td colspan="2">是（ ） 否（ ）</td>
<td colspan="2">安全证书编号</td>
<td></td>
</tr>
<tr>
<td rowspan="4">扦样单位</td>
<td>名称</td>
<td colspan="5">美国加利福尼亚</td>
</tr>
<tr>
<td>地址</td>
<td colspan="5">美国加利福尼亚220号</td>
</tr>
<tr>
<td>联系人</td>
<td colspan="2"></td>
<td colspan="2">联系电话</td>
<td>010-50*****</td>
</tr>
<tr>
<td>邮政编码</td>
<td colspan="2">65****4</td>
<td colspan="2">传真/E-mail</td>
<td>022-56****5</td>
</tr>
<tr>
<td rowspan="2">检测项目依据</td>
<td colspan="6">净度___发芽率___纯度___水分___其它___</td>
</tr>
<tr>
<td colspan="6">检验依据：GB/T 3543.1～7-1995等 判定依据：GB 20464-2006等</td>
</tr>
<tr>
<td colspan="7" style="text-align: left;text-indent: 1.5em;">备注（需要说明的其他问题）:</td>
</tr>
<tr>
<td colspan="4" style="height: 100%;text-align: left;padding-left: 10px;">
<p>本次扦样始终在本人陪同下完成，上述记录核对无误。</p>
<p><span>经手人：</span> <span style="margin-left: 240px;">职务</span></p>
<p>年 月 日 （盖章）</p>
</td>
<td colspan="3" style="text-align: left;padding-left: 10px;">
<p>扦样人（签名）：</p>
<p>扦样单位（公章）</p>
<p>扦样日期 年 月 日</p>
</td>
</tr>
</table>
</form>
<p style="text-align: center;">扦样单一式三份，承检机构和被抽查单位各存留一份，报下达任务的农业政主管部门一份。</p>
</div>
<div style="width: 4mm;height:167mm;float: left;padding-top: 130mm;text-align: right;">
第二联<div style="width: 5mm;height:5mm;"></div>客户
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 如何实现win9X进程间数据通讯技术
- 用canvas实现红心飘飘的动画效果
- 利用Hook技术实现键盘监控
- 用Delphi实现远程屏幕抓取
- 如何利用C++ Builder 4.0 Enterprise实现对Excel97 的调用
- 应用程序敏感键的实现
- 在PB中快速实现数据库树形结构
- 在PowerBuilder中实现菜单条级权限的设置
- PB7.0中实现Jaguar GTS组件开发
- 如何实现数据的自动录入
- PowerBuilder中实现数据窗口打印预览通用方法
- 用Delphi实现远程屏幕抓取
- 用CTI实现与Web交谈
- WebClass实现动态WEB编程之理论篇
- WebClass实现动态WEB编程之实践篇
- 实现类似IE的打印网页功能
- 用DELPHI实现特色按钮
- 串行通信的基本原理及用MFC实现串口通信编程
- 如何在应用程序中实现关机功能
- 用Delphi在工业控制和自动化实现多线程进行数据采集