首先需要下载一个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. import renumber.py in pymol

    cp renumber.py /usr/local/lib/python2.7/dist-packages/pymol import renumber or run /path/to/renumber ...

  2. linux下查看最消耗CPU、内存的进程

    2012-11-19 15:38:04 分类: LINUX 1.CPU占用最多的前10个进程: ps auxw|head -1;ps auxw|sort -rn -k3|head -10 2.内存消耗 ...

  3. mybatis-generator 1.3.5支持流式 fluent 方法

    在以往的无数此写model的过程中,大家都会烦恼model的set方法写一堆.比如 Person p = new Person(); p.setName("name"); p.se ...

  4. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  5. 14 Generator

    Generator 就是可以返回多个结果,也是支持 Iterator 接口. function* helloWorldGenerator() { yield 'hello'; yield 'world ...

  6. mybatis generator.xml 配置 自动生成model,dao,mapping

    generator.xml文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE gener ...

  7. 12月15日smarty模板基本语法

    smarty基本语法: 1.注释:<{* this is a comment *}>,注意左右分隔符的写法,要和自己定义的一致. <{* I am a Smarty comment, ...

  8. C++构造函数

    一. 构造函数是干什么的class Counter{public:         // 类Counter的构造函数         // 特点:以类名作为函数名,无返回类型         Coun ...

  9. APEX初步

    APEX是SFDC中用于开发的语言.语法上类似JAVA等面向对象的语言,运行起来类似数据库中的存储过程.可以在SFDC事件中添加业务逻辑,操作相关数据和用在Visual Force页面中. 保存,编译 ...

  10. quantum sets

    the principles of quantum mechanics by p.a.m.dirac.