非IE浏览器例如FF,chrome,在打印时,默认是不会打印table的背景和图片的,必须手动设置。而IE有activeX和wb可以设置,通过JS修改默认配置。
难道真的无法实现了吗,下载了jprintarea也是无法实现的。
如果需要套打或者要实现打印预览并在预览中设置打印效果,那就很难实现了。
window.print的功能确实是比较弱的。
我觉得解决办法就是不用background-color和background-image样式。而采用div+image的方式
将背景图片放在image中,image用绝对定位和clip属性定位到指定位置。
<div class="menu-about">
<img class="transparent_png"
src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png"
alt="About" title="About Us" width="611" height="39" />
</div>
.menu-about {
position: relative;
top: 0; left: -293px;
width: 106px; height: 29px;
}
.menu-about img {
position: absolute;
clip: rect(0 399px 29px 293px);
}
我覺得這方法的確比較符合實務的情境,不但能跨瀏覽器,列印的問題也解決了,HTML 也比較乾淨
我的demo代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>print.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#print_button").click(function() {
$("#print_button").hide();
window.print();
});
});
</script>
<style>
#imgDiv{
position:absolute;
}
#myPrintArea{
position:absolute;
width: 100%;
}
.bgImg{
position: absolute;
display:block;
left:0px;
top:10px;
z-index: 0;
}
#listTb {
position: absolute;
left:0px;
top:10px;
z-index: 1;
color:#ccc;
}
</style>
</head>
<body>
<div id="print_button" >
Print
</div>
<div id="myPrintArea">
<img src="bg.png" class="bgImg">
<table id="listTb">
<tbody>
<tr style="display:table-header-group;font-weight:bold">
<th>Publication Date</th><th>Account</th><th>Issue No.</th><th>首數</th><th>印數</th><th>Edit</th>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-17</td><td class="exportTD">ED</td><td class="exportTD">123456</td><td class="exportTD">A:1.00
<br>
B:1.12
<br>
C:1.32
<br>
</td><td class="exportTD">A:1
<br>
B:3
<br>
C:1
<br>
D:1
<br>
E:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="1" value="Edit">
</td>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-15</td><td class="exportTD">OS</td><td class="exportTD">123</td><td class="exportTD">A:1.00
<br>
D:1.12
<br>
</td><td class="exportTD">A:1
<br>
B:1
<br>
C:1
<br>
D:1
<br>
E:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="3" value="Edit">
</td>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-15</td><td class="exportTD">WW</td><td class="exportTD">012</td><td class="exportTD"></td><td class="exportTD">A:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="4" value="Edit">
</td>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-10</td><td class="exportTD">OS</td><td class="exportTD">00</td><td class="exportTD"></td><td class="exportTD">A:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="2" value="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
参考:http://blog.miniasp.com/post/2008/12/CSS-Spriting-without-using-background-image.aspx
分享到:
相关推荐
它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 WebPrint内含一个在vc7.0上开发的ActiveX控件(只有75k), 这个控件主要实现对...
它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 ePrint内含一个在vc7.0上开发的ActiveX控件(180k), 这个控件主要实现对打印...
它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP,PHP,.NET等动态程序生成的HTML页面。 ReYoPrint内含一个在vc7.0上开发的ActiveX控件(73k), 这个控件...
WebPrint4.0是由以前的... 合并后的WebPrint,是一个强大而全面的web打印解决方案,它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。
Lodop是一款专业的WEB打印控件,其设计目标是简单易用、功能足够强大,开创WEB打印开发的新局面。...本软件是免费的,,很好解决了web打印的套打的难题 极力推荐,,支持现在主流web开发语言,,,和浏览器
它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 ePrint内含一个在vc7.0上开发的ActiveX控件(180k), 这个控件主要实现对打印...
在web打印和打印预览程序中会遇到很多IE浏览器上面问题,但是这个插件可以很好的解决这个问题
它内含一个在vc7.0上开发的ATL小控件(只有59k), 这个小控件主要实现对IE浏览器中文档打印格式的控制,可以定制打印纸型,纸张来源,打印方向,设置表头,表尾, 表格,表格列宽,打印预览,分页,缩放等等用户经常...
*修正 - 实施功能WYSIWYG_Core.getAttribute其解决问题的同时获得对IE浏览器的样式属性 *改变 - 获取样式属性在编辑链接 *添加 - WYSIWYG_Table对象,它用于提高表格编辑 *改变 - 新的图标打印和预览( THX SWEB ...
9月26日升级,解决原来msxml版本不足时不能使用的问题,增添了运行时设计器。 可打印数据: 记录集 各种Grid(如选中多行,打印选中行,否则打印全部) 记录集save方法的到的xml,mssql2000 for xml查询得到...
最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题。 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-...
e表的报表设计器也是在IE浏览器中直接运行的。这样用户可以很方便地将报表设计器嵌入到自己的产品中。 Excel绘表方式能解决报表样式问题,但Excel的这种基于自由单元格的模型和基于二维表的数据库物理表模型没法...
技术基础 New Folder 多样式星期名字转换 [Design, C#] .NET关于string转换的一个...C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, C#]...
asp.net,jsp做的b/s架构的程序中,为客户端ie提供报表预览、打印、导出功能,webreport包括2部分:服务器端报表引擎(在asp,asp.net,jsp都能用,webreport对上述3中语言都开发了报表引擎)、客户端ie浏览器ActiveX插件...
实例206 设置ie浏览器的默认下载路径 第19章 c#语言新技术 实例207 使用隐式类型局部变量实现字母的大小写转换 实例208 使用扩展方法显示员工信息 实例209 使用lambda表达式查找指定字符串 实例210 检查序列中是否...
4) 改进了转换相对及绝对路径的算法,此算法除了修正了上一版本无法正确转换全部路径的BUG外,还修正了以前算法在非IE浏览器下可能引起的脚本停止响应的严重BUG。 5) 修改Word文档导入功能生成的图片文件名为...
实例206 设置ie浏览器的默认下载路径 394 第19章 c#语言新技术 396 实例207 使用隐式类型局部变量实现字母的大小写转换 397 实例208 使用扩展方法显示员工信息 398 实例209 使用lambda表达式查找指定字符串 400 实例...
实例089 关闭IE主窗口时,不弹出询问对话框 132 实例090 弹出提示对话框并重定向网页 133 3.8 弹出网页对话框 134 实例091 弹出全屏显示的网页模式对话框 134 实例092 网页拾色器 136 实例093 日期选择器...