JqGrid web打印实现代码

在IE9中打印没有问题，但IE6、7、8都会出现前几页空白的情况(只显示列头信息)，找了很久，才发现是ui-jqgrid-bdiv样式类(在ui.jqgrid.css内)中的overflow引起的，在打印之前将其删除，打印之后将其恢复即可。
打印时的CSS样式如下：


代码如下:

<style type="text/css" media="print">
#accordion h3, #vcol, div.loading, div.ui-tabs-hide,ul.ui-tabs-nav li, td.HeaderRight { display:none }
.ui-jqgrid-titlebar, .ui-jqgrid-title{ display:none }
.ui-jqgrid-bdiv_self{position: relative; margin: 0em; padding:0; text-align:left;}
#pager{display:none; z-index:-1;}
</style>

打印代码：


代码如下:

$("#btnPrint").live("click", function () {
window.focus();
window.print();
return false;
});
var GridHeight;
function window.onbeforeprint() {
//打印前事件 var jqgridObj=jQuery("#jqgridlist");
GridHeight = jqgridObj.jqGrid('getGridParam', 'height');//获取高度 jqgridObj.jqGrid('setGridHeight', '100%');//将其高度设置成100%,主要是为了jqgrid 中有Scroll条时 能把该scroll条内内容都打印出来 $("#gview_jqgridlist .ui-jqgrid-bdiv").removeClass().addClass("ui-jqgrid-bdiv_self");//去除掉overflow属性}
function window.onafterprint() {//打印后事件 //放开隐藏的元素
$("#gview_jqgridlist .ui-jqgrid-bdiv_self").removeClass().addClass("ui-jqgrid-bdiv");//恢复overflow属性，否则会导致jqgrid中scroll条消失 jQuery("#jqgridlist").jqGrid('setGridHeight', GridHeight);//设置成打印前的高度}

CSS 媒体属性介绍：
媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
媒介类型
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。
@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：


代码如下:

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print
{
p.test {font-family:times,serif; font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>....</body>
</html>

不同的媒介类型
注释：媒介类型名称对大小写不敏感。



































媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。

赞 (0)

相关推荐

  • web打印的另类方法

    web打印的另类方法     选择自 wfmazhenhai 的 Blog   关键字   web打印的另类方法  出处     相信用B/S方式做过应用的人都可能会遇到这样一个问题,如何方便.美观地实现报表打印.如果使用浏览器的打印菜单打印的话,将把网页上的一些无用的东西打到报表上,比如应用菜单等.因为选择打印菜单打印网页将会把网页中的所有内容全部打印出来,如果你的应用有分帧则打印内容将包括各帧中的内容,而你实际要的内容只是其中一部分.所以有很多应用就只能把打印功能放到后台完成了. 针对这种情

  • asp实现WEB打印代码大全

    (1)<script defer>  function SetPrintSettings() {  // -- advanced features  factory.printing.SetMarginMeasure(2) // measure margins in inches  factory.SetPageRange(false, 1, 3) // need pages from 1 to 3  factory.printing.printer = "HP DeskJet 87

  • 实现web打印的各种方法介绍及实现代码

    wed的打印方法具我自己懂得知道的有: 1.JQuery插件Jqprint实现 2.JQery打印插件PrintArea实现网页打印 3.CSS控制网页打印样式 JQuery插件Jqprint实现: 首先要导入js文件: jquery.jqprint.js下载 复制代码 代码如下: <scriptlanguage="javascript"src="jquery-1.7.1.min.js"></script> <scriptlanguag

  • 使用批处理修改web打印设置笔记 适用于IE

    就不得不调整WEB页面页边距以及去掉页眉页脚,上网查了很多资料发现IE没有自带这些设置打印机的功能,无法使用纯javascript设置.前几天上网查了资料,可以通过修改注册表达到去除页眉页脚的效果,可是试了一下后发现IE不允许直接修改注册表.后面又想到了两种解决办法:1)营业员通过IE的"页面设置"功能再结合我们提供的设置参数设置打印效果:2)我们提供一个批处理文件,其中已经设置好了必要的参数,营业员只需运行一次该批处理文件即可. 我选则了第二种方法,以前没写过批处理文件,但听说很容易

  • js控制web打印(局部打印)方法整理

    首先定义css样式: 复制代码 代码如下: @media print { .noprint { display: none;color:green } } 对于不想打印的内容只用在标签中加上 class=noprint即可,打印的时候客户也不会看到页面任何变化. 打印时调用 window.print(); 另外几种js局部打印的方法: 移花接木: 打印的时候,把需要打印的内容替换成整个body内容(用户会在打印的时候看到变化,客户体验不太好) 复制代码 代码如下: function previe

  • 利用WebBrowser彻底解决Web打印问题（包括后台打印）

    抱着"取之于众 服务于众"的思想,我总结了一下,把它拿到网上来与大家分享,希望能帮助遇到类似问题的朋友. 我主要使用了IE内置的WebBrowser控件,无需用户下载和安装.WebBrowser有很多功能,除打印外的其他功能就不再赘述了,你所能用到的打印功能也几乎全部可以靠它完成,下面的问题就是如何使用它了.先说显示后打印,后面说后台打印. 1．首先引入一个WebBrowser在需要打印的页面,可以直接添加: <object id="WebBrowser" c

  • web打印 window.print()介绍

    我只给出比较有效的,方便的打印方法,有些WEB打印是调用ActiveX控件的,这样就需要用户去修改自己IE浏览器的Internet选项里的安全里的ActiveX,将它们全部启用,有些麻烦,翻了下网络,下面的方法是可以直接打印,而不会去修改IE的Internet选项. window.print来打印页面,页面上别的元素也会被打印处理,页头页尾的格式也不好控制.• 常用方法:大部分情况会把查询的结果绑定到DataGrid上来,然后打印DataGrid.这种情况的打印一般来说格式比较固定简单,确定后基

  • JqGrid web打印实现代码

    在IE9中打印没有问题,但IE6.7.8都会出现前几页空白的情况(只显示列头信息),找了很久,才发现是ui-jqgrid-bdiv样式类(在ui.jqgrid.css内)中的overflow引起的,在打印之前将其删除,打印之后将其恢复即可. 打印时的CSS样式如下: 复制代码 代码如下: <style type="text/css" media="print"> #accordion h3, #vcol, div.loading, div.ui-tabs

  • Web打印解决方案之普通报表打印功能

    Web打印解决方案之普通报表打印功能

    做过很多的Web项目,大多数在打印页面内容的时候,采用的都是通过Javascript调用系统内置的打印方法进行打印,也就是调用PrintControl.ExecWB(?,?)实现直接打印和打印预览功能.打印的效果及控制性虽然不是很好,但是也能勉强使用,应付一般的打印还是可以的了. 代码如下所示: 代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->

  • Web打印解决方案之证件套打的实现思路

    Web打印解决方案之证件套打的实现思路

    在前面介绍过<Web打印解决方案之普通报表打印功能>的一片文章中提到过那个打印控件Lodop,做起套打来感觉还是挺方便的,至少位置调整界面不需要自己弄,位置嘛,也提供了自动保存的功能,不需要理会. 一般的套打,包含了几部分操作:打印预览.打印维护.打印设计. 打印预览和打印维护是面向终端用户的,打印维护是指内容不能修改删除.但位置可以调整,给不同的打印机不同的尺寸打印提供调整位置的可能性. 打印设计是面向开发人员的,开始需要通过这个功能来设计好套打的界面,就是根据套打证件的背景图片,大致摆放好

  • c# 如何实现web打印插件

    c# 如何实现web打印插件

    目录 客户端程序(Winform) 1.监听Web端的WebSocket消息,这里有用到三方包:Fleck,开箱即用,非常方便. 2.处理Html,将Html转换为图片: 3.打印图片 其他的实现思路 第一种 第二种 最近,客户有个需求过来,Web端无预览打印,美其名曰:快捷打印. 当时第一反应就是找插件,拿来主义永远不过时.找了一圈发现,免费的有限制,没限制的需要收费(LODOP真的好用).说来就是一个简单的无预览打印,收费的诸多功能都无用武之地,总的来说性价比很低,所以就打算自己琢磨着写一个

  • Java编程实现从尾到头打印链表代码实例

    问题描述:输入一个链表的头结点,从尾巴到头反过来打印出每个结点的值. 首先定义链表结点 public class ListNode { int val; ListNode next = null; ListNode(int val){ this.val = val; } } 思路1:此题明显想到是利用栈的思想,后进先出,先遍历链表,依次将结点值进栈.最后在遍历栈出栈. public static Stack<Integer> printListReverse_Stack(ListNode li

  • PHP Web木马扫描器代码分享

    不废话了,直接贴代码了. 代码如下: <?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控增强版 * * @version 1.0 * 下面几个变量使用前需要手动设置 * **/ /*===================== 程序配置 =====================*/ $pass="test";//设置密码 $jkdir=&quo

  • jQuery实现区域打印功能代码详解

    使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

  • C++中实现把表的数据导出到EXCEL并打印实例代码

    实现把表的数据导出到EXCEL并打印实例代码 首先加入这两句: #include "utilcls.h" #include "comobj.hpp" 下面正式开始: void __fastcall TMainForm::ToExcel(TADOQuery *TT,AnsiString str) {//TT为被导出数据的表,str为命令(具体看代码底部的if语句) #define PG OlePropertyGet #define PS OlePropertySet

随机推荐