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 注意:由于涉及到版权问题,此附件没有图片和音 ...
随机推荐
- cocos2d-x事件EventListenerTouchOneByOne没反应
今天写了 cocos2d-x事件EventListenerTouchOneByOne,发现死活没反应,原代码复制到新工程没问题啊, 后来发现cocostudio用的基础容器(ccui.Layout:c ...
- 基于Dubbo框架构建分布式服务（三）
我们将上面开发的服务提供方服务,部署到2个独立的节点上(192.168.14.1和10.10.4.125),然后可以通过Dubbo管理中心查看对应服务的状况,如图所示: 上图中可以看出,该服务有两个独 ...
- Linux可信计算机制模块详细分析之核心文件分析（8）tpm.c核心代码注释（中）
/*设置TPM命令格式*/ ssize_t tpm_getcap(struct device *dev, __be32 subcap_id, cap_t *cap, const char *desc) ...
- Struts2 拦截器配置以及实现
@(Java ThirdParty)[Struts|Interceptor] Struts2 拦截器配置以及实现 Struts2的拦截器应用于Action,可以在执行Action的方法之前,之后或者两 ...
- 抓取百万知乎用户信息之HttpHelper的迭代之路
什么是Httphelper? httpelpers是一个封装好拿来获取网络上资源的工具类.因为是用http协议,故取名httphelper. httphelper出现的背景 使用WebClient可以 ...
- qemu 源码调试
1:下载最新的QEMU源码 git clone https://github.com/qemu/qemu.git 2:对qemu进行编译 ./configure --prefix=/usr --lib ...
- socket (一)
socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...
- 字体大小和背景颜色修改--Android Studio
打开: File/seting/Editor/colors&Fonts/Fonts editor Font处默认的不让修改 所以先点击save as 随便点个名字 然后 size就可以修改了
- How to Delete XML Publisher Data Definition Template
DECLARE -- Change the following two parameters VAR_TEMPLATECODE VARCHAR2(100) := 'CUX_CHANGE_RPT1 ...
- 【荐】如何规划 Nginx 网站目录的权限（用户，用户组，ssh，sftp）
从上一篇文章:PHP网站(nginx.php-fpm.mysql) 用户权限解析,可以学习了解到,nginx 和 php-fpm 的用户是如何运作的. 有个工作场景: 1.公司的一台 CentOS 服 ...