首先需要下载一个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. 链表反转leetcode206

    最近准备结束自己的科研生涯,准备要开始找工作了,准备在LEETCODE刷刷题...刷的前40题全部用python刷的,各种调包速度奇快,后被师哥告知这样没意义,于是准备开始回归C++,Python用的 ...

  2. [转]Pythoin中的Lambda表达式

    引用自:http://www.cnblogs.com/evening/archive/2012/03/29/2423554.html 在学习python的过程中,lambda的语法时常会使人感到困惑, ...

  3. 《黑客反汇编揭秘》(2e)推荐书单

    Must-Read Books and Other References Books on C/C++: The C Programming Language by Brian W. Kernigha ...

  4. CSS3 Animation 帧动画 steps()

    @keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...

  5. SQLServer------Join的使用方法

    参考菜鸟教程网: http://www.runoob.com/sql/sql-join.html select a.Canteen,b.OrderNum,b.CreateTime,c.Name fro ...

  6. Java虚拟机浅探

    简介 对于java开发人员了来说,对java虚拟机肯定有着或多或少的了解.因为有了虚拟机的存在,才会使得java的内存管理变得那么方便,不再像C++那样使用new/delete来直接管理内存.知名的j ...

  7. oracle 按时间段统计15分钟内的数据

    string sql = "select to_char(StartTime, 'yyyy')||'-'|| to_char(StartTime, 'mm')||'-'|| to_char( ...

  8. 分页型Memory LCD显存管理与emWin移植

    上一篇随笔整理了一下逐行扫描型Memory LCD的显存管理与emWin移植,这篇就整理一下分页型Memory LCD显存管理与emWin移植. //此处以SSD1306作为实例 //OLED的显存/ ...

  9. thinkphp如何一次性的上传多个文件,在文件域中可以多选?

    可以做到类似于某度网盘的样式吗? 文件夹的命名, 可以用单数, 也可以用复数, 在同一个项目中, 只要统一就好了. 毕竟项目开发不同于英语写作. 建议使用缩写, 不管是不是缩写都用单数, 这样简洁,容 ...

  10. JavaScript 智能社 拖拽

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...