首先需要下载一个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端实现打印的更多相关文章

  1. 突破技术限制，实现Web端静默打印

    作为Web开发的同僚们,估计都有一个共同的烦恼,Web端为什么不能够像 CS端那样直接打印预览?直接移除掉打印预览界面不就可以了? 真实情况是Web端受限于浏览器的权限,无法直接访问打印机等本机资源. ...

  2. 新手入门：史上最全Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  3. Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  4. web端及时通讯原理

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  5. python 全栈开发，Day127(app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面)

    昨日内容回顾 1. 小爬爬 内容采集 XMLY 的 儿童频道 requests 2. 登陆 注册 自动登陆 退出 mui.post("请求地址",{数据},function(){} ...

  6. 记一次爬虫经历(友话APP的Web端)

    背景:学校为迎接新生举办了一个活动,在友话APP的校园圈子内发布动态即可参与活动,最终抽取数名同学赠送福利. 分析:动态的数量会随着迎新的开始逐渐增加,人工统计显然不现实,因此可以使用爬虫脚本在友话A ...

  7. IPMI相关漏洞利用及WEB端默认口令登录漏洞

    IPMI相关漏洞 0套件漏洞 使用0套件时,只需要Username,口令任意即可绕过身份鉴别执行指令.而且一般还有一个默认的账户admin或者ADMIN. 备注:IPMI是一套主机远程管理系统,可以远 ...

  8. 新手入门贴：史上最全Web端即时通讯技术原理详解

    关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...

  9. app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面

    一.app端内容播放 下载代码 https://github.com/987334176/Intelligent_toy/archive/v1.0.zip 注意:由于涉及到版权问题,此附件没有图片和音 ...

随机推荐

  1. 【USACO 3.1】Stamps （完全背包）

    题意:给你n种价值不同的邮票,最大的不超过10000元,一次最多贴k张,求1到多少都能被表示出来?n≤50,k≤200. 题解:dp[i]表示i元最少可以用几张邮票表示,那么对于价值a的邮票,可以推出 ...

  2. oracle数据查询

    select * from XMBL_EM_DBBACK where f_djbh='DB01201612270013'select * from flow_task_list where biz_d ...

  3. Shiro-集成Spring

    集成Spring 加入Spring 和Shiro的jar 包 配置Spring 及SpringMVC 参照:1.3.2\shiro-root-1.3.2-source-release\shiro-ro ...

  4. 【codeforces 148D】 Bag of mice

    http://codeforces.com/problemset/problem/148/D (题目链接) 题意 包中有w个白鼠,b个黑鼠.公主和龙轮流画老鼠,公主先画,谁先画到白鼠谁就赢.龙每画完一 ...

  5. [C#] 日志类

    在程序发布到服务器上的时候,不能在像本地执行一样可以调试,在发生错误时候,往往不能很方便的查找错误.将错误信息写入文件是一种比较常用的处理方法.以下是一个日志类,实现以下功能: 1)按日期每天生产不同 ...

  6. ThinkPhp 3.2 自动验证

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 数据验证有两种方式: 静态方式:在模型类里面通过$_validate属性定义验证规则 ...

  7. 一道javascript数组操作题

    题目如下: var arr = ['100px','abc'-6,[],-98765,34,-2,0,'300',,function(){alert(1);}, null, document, [], ...

  8. myeclipse竖行删除

    1.Alt + shift + a   

  9. visio二次开发——图纸解析之形状

    今天有空,下班前补齐解析visio图形形状的方法,包含图形背景色.字体颜色.备注信息.形状数据取值. /// <summary> /// 设置形状的选择属性 /// </summar ...

  10. adb install INSTALL_FAILED_ALREADY_EXISTS

    安装时候碰到的一个问题:已经签名的包,重新通过adb install 会提示安装错误.提示:Failure [INSTALL_FAILED_ALREADY_EXISTS] 为啥eclipse自己就可以 ...