首先需要下载一个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. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  2. QPS 与 TPS 简介

    QPS:Queries Per Second意思是"每秒查询率",是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准. TPS是Tra ...

  3. linux 让程序在后台运行的几种可靠方法

    我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败.如何让命令提交后不受本地关闭终端窗口/网络断开 ...

  4. 自己写的服务出现"服务没有及时响应启动或控制请求 1053" 错误

    自己写了一个服务,安装到电脑上后 启动时发现报"服务没有及时响应启动或控制请求 1053" 这个错误 在网上找了一些方法,都没有解决 后来,看了下,原来有个写文件的方法读取文件没有 ...

  5. asp.net mvc bootstrap datatable 服务端分页

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...

  6. 修改pip更新源

    修改pip更新源 pip安装时默认访问pypi的,但是pypi的速度对于国内来说有点慢,还在国内也有一些pip的镜像源,造福广大程序员 pipy国内镜像目前有: http://pypi.douban. ...

  7. JavaScript的Dom操作

    两个练习: 1.两个表单里面的数据相互移动: <style type="text/css"> select { width: 100px; position: rela ...

  8. LeedCode-Two Sum

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  9. Nginx+Php Windows部署

    http://www.cnblogs.com/huayangmeng/archive/2011/06/15/2081337.html 一定要以下面的形式启动php-cgi php-cgi.exe -b ...

  10. Abp集成Swagger的最佳实践

    1.在项目中添加nuget包 Abp.Web.Api.SwaggerTool 2.在项目Abp模块的DependsOn添加AbpWebApiSwaggerToolModule Run It,启动项目, ...