WEB端实现打印
首先需要下载一个JQ插件：
地址：
http://files.cnblogs.com/files/SabWoF/jq%E6%89%93%E5%8D%B0%E6%8F%92%E4%BB%B6%E5%AE%9E%E4%BE%8B.rar
先看一下index.html
里面需要注意的是：
一、引用文件
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.jqprint-0.3.js"></script>
二、打印的方法
<script language="javascript">
function a(){
$("#ddd").jqprint();
}
</script>
要打印就需要先引用前面两个文件，然后js方法里面的 .jqprint()方法就是打印方法了！
只需要传入你要打印的div的名称就行了。
简单的打印基本就OK了，但是我需要打印表格，就需要添加样式了。
这个需要看一下jquery.jqprint-0.3.js这个文件，这里面写得很清楚：
if (opt.importCSS) {
if ($("link[media=print]").length > 0) {
$("link[media=print]").each(function () {
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
});
}
else {
$("link").each(function () {
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
});
}
}
需要说明的是他下面还有一个打印过程中的一些控制：
$.fn.jqprint.defaults = {
debug: false,//如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
printContainer: true,//表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
};
开始没理解这个media=print是个什么意思，然后网上找了一下link这个标签的media属性，是这么说的：
media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
我们要打印机，就直接 media="print"就ok了
然后就可以在上print.css里面写样式了。
如果直接 border='1'的话，四边的线条较细，而中间的较粗，所以需要动动脑筋了。
这是我写的：
HTML里面：
<div id="Prin">
<h1 style="text-align:center"><span id="HeadFont">某某公司放行条</span></h1>
<table id="SchedulingsTB" style="width:100%;" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td class="tbOneList"><span class="font_size_H">出门时间</span></td>
<td class="tbOneList"><span class="font_size_H">车牌号</span></td>
<td class="tbOneList"><span class="font_size_H">数量</span></td>
<td class="tbOneList"><span class="font_size_H">驾驶员</span></td>
<td class="tbOneList tbSixList"><sapn class="font_size_H">放行人</sapn></td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td class="tfootTd" colspan="4"></td>
<td class="tfootTd" colspan="2"></td>
</tr> </tfoot>
</table>
</div>
CSS里面：
/*大标题*/
.HeadFont {
font-size:35px;
}
/*标题列*/
.font_size_H {
font-size:20px;
}
/*主体的字体*/
.font_size {
font-size:16px;
}
/*行样式 td*/
.tbOneList {
height:auto;
border-left:1px solid #85a4e0;
border-top: 1px solid #85a4e0;
}
/*行的最右侧样式*/
.tbSixList {
height:auto;
border-right:1px solid #85a4e0;
}
/*行脚的样式*/
.tfootTd {
height:auto;
border-bottom:1px solid #85a4e0;
}
这样就稍微好看点了。
WEB端实现打印的更多相关文章
- 突破技术限制，实现Web端静默打印
作为Web开发的同僚们,估计都有一个共同的烦恼,Web端为什么不能够像 CS端那样直接打印预览?直接移除掉打印预览界面不就可以了? 真实情况是Web端受限于浏览器的权限,无法直接访问打印机等本机资源. ...
- 新手入门：史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- web端及时通讯原理
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- python 全栈开发，Day127(app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面)
昨日内容回顾 1. 小爬爬 内容采集 XMLY 的 儿童频道 requests 2. 登陆 注册 自动登陆 退出 mui.post("请求地址",{数据},function(){} ...
- 记一次爬虫经历(友话APP的Web端)
背景:学校为迎接新生举办了一个活动,在友话APP的校园圈子内发布动态即可参与活动,最终抽取数名同学赠送福利. 分析:动态的数量会随着迎新的开始逐渐增加,人工统计显然不现实,因此可以使用爬虫脚本在友话A ...
- IPMI相关漏洞利用及WEB端默认口令登录漏洞
IPMI相关漏洞 0套件漏洞 使用0套件时,只需要Username,口令任意即可绕过身份鉴别执行指令.而且一般还有一个默认的账户admin或者ADMIN. 备注:IPMI是一套主机远程管理系统,可以远 ...
- 新手入门贴：史上最全Web端即时通讯技术原理详解
关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...
- app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面
一.app端内容播放 下载代码 https://github.com/987334176/Intelligent_toy/archive/v1.0.zip 注意:由于涉及到版权问题,此附件没有图片和音 ...
随机推荐
- 【poj3270】 Cow Sorting
http://poj.org/problem?id=3270 (题目链接) 题意 n个数要要按从小到大的顺序排列,每次只能交换任意两个数,交换的代价为这两个数之和,问最小代价. Solution 题目 ...
- JS控制，返回上一页之后强行刷新一次
网站建设过程中,提交页面后我们经常要用到window.history.go(-1)返回上一页,因为页面的缓存功能,我们只能返回上次操作的页面,但在删除等操作中,我们希望实时看到删除项目后的页面,这就要 ...
- 让 FreeBSD 和 Gentoo Linux 在 ZFS 存储卷上共存
自我回归到 Librem 15 已经有段时间了.我一般会选择 FreeBSD 来处理所有的事情,但有时会要访问一个运行在 Librem 平台上的 Linux OS,以便用它来帮助我对一些遗留的设备驱动 ...
- Table 表单
<style> table th { white-space: nowrap; } .chk { white-space: nowrap; } </style> <tab ...
- express之sendFile
module.exports = function(req, res, opt) { var applyNo = req.query.applyNo; console.log("applyN ...
- MyBatis源码分析（3）—— Cache接口以及实现
@(MyBatis)[Cache] MyBatis源码分析--Cache接口以及实现 Cache接口 MyBatis中的Cache以SPI实现,给需要集成其它Cache或者自定义Cache提供了接口. ...
- 浅谈Android样式开发之selector
引言 上一篇Android UI中文章我们详细介绍了Android中shape标签的使用.通过shape标签我们可以定义矩形.椭圆.环形.直线等效果.不过shape只能定义单一的形状,在实际开发中,我 ...
- Oracle 删除重复数据只留一条
查询及删除重复记录的SQL语句 1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断 select * from 表 where Id in (select Id from 表 g ...
- MySQL的简单使用
MySQL 参数 参数 描述 备注 -D,--database=.name 打开指定数据库 mysql –uroot –procky –Dhisdb 或者mysql –uroot –prock ...
- 全文检索解决方案（lucene工具类以及sphinx相关资料）
介绍两种全文检索的技术. 1. lucene+ 中文分词(IK) 关于lucene的原理,在这里可以得到很好的学习. http://www.blogjava.net/zhyiwww/archive/ ...