首先需要下载一个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. Java常见Exception整理

    前言: 技术开发入坑近1年,摸打滚爬,各种升级打怪.因目前从事Java相关,故整理了一下并把常见的异常(Exception)贴出来,一来为了后续提醒自己,二来供即将入坑的朋友打一下预防针!A级(代码逻 ...

  2. synergy 使用记录

    synergy 是一个多台电脑之间,共享鼠标.键盘的开源工具,做的很赞.目前,这个工具对 Windows.Linux.MacOS 都有很好的支持. 手上 arm 板安装的是 debian 系统,所以, ...

  3. 【Phylab2.0】Beta版本发布说明

    新版本特性 1. 新的物理实验 1020314等 2. 讨论区与报告界面的整合 3. 在线脚本管理功能 4. 管理员功能 有在线脚本管理功能的支持后加入了管理员模式,可以向其他学校开放,招募管理员并添 ...

  4. 16 Promise

    Promise 特点 对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称Fulfilled)和Rejected(已失败). ...

  5. 安装PHP sphinx扩展 sphinx-1.1.0/sphinx.c:105:2: error: too few arguments 错误

    表现: /home/sphinx-1.1.0/sphinx.c: In function 'php_sphinx_client_read_property':/home/sphinx-1.1.0/sp ...

  6. Arcgis, ArcEngine, Arcgis Server使用开发汇总 索引

    ArcGIS系列软件license及安装: Arcgis SDE10.1 和 Arcgis server10.1的授权文件license tnt_esri.dat Arcgis8.1安装license ...

  7. New Plan!

    很久无写过blogs,荒废得差不多了,在博客园虽开bolg 5年多,但由于自己工作的问题,从开始的热情记录,到冷却冰冻,再到现在重拾起来,有一番感受:从大学刚毕业的制作网页菜鸟,开始接触DIV,CSS ...

  8. jetty9内嵌到应用，并在启动后加载WebApplicationInitializer，可运行jsp

    声明:本文所介绍的两功能都已经测试通过. 第一步先确保你用的是java 8,并依赖需要的相关jar包,以下是用gradle进行依赖的信息: ext { taglibsStandardVersion = ...

  9. Demo 版

    Demo1   美食网站 Demo2   12301智慧旅游公共服务平台 Demo3   react_and_koa example

  10. C程序汇编运行模式简析

    SJTUBEAR 原创作品转载请注明出处 /<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 1. 汇编 ...