非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浏览器实现IE功能.rar”所涉及的知识点主要集中在如何在非Internet Explorer(IE)浏览器上模拟或实现IE特有的功能,特别是针对OCX(ActiveX Control)控件的加载。描述中提到的“IE Tab”是一个插件,...
总的来说,这个解决方案提供了一种在IE浏览器中通过JavaScript控制OCX控件实现异步打印PDF和图片的方法,特别适合自助终端等应用场景。需要注意的是,由于依赖于ActiveX和IE浏览器,这个方案可能不适用于其他非IE...
本压缩包提供的"支持IE浏览器的web打印控件和使用方法.zip"包含了一个名为"smsx.cab"的文件,这是一个ActiveX控件,专为IE浏览器设计,用于实现网页内容的直接打印。 ActiveX是微软推出的一种技术,它允许开发人员...
**IE的smsx控件**是一种专为Internet Explorer设计的浏览器控件,它允许开发者通过JavaScript来实现对IE浏览器的Web打印功能的精细控制。在传统的Web应用中,浏览器的打印功能往往比较基础,可能无法满足一些特定的...
斑马Magicard打印机的IE浏览器打印插件是基于IE浏览器的ActiveX技术,ActiveX是一种由微软开发的技术,用于在Web页面上提供丰富的交互式体验。这个插件作为一个控件,嵌入到IE浏览器中,使得用户无需下载文件或离开...
它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 WebPrint内含一个在vc7.0上开发的ActiveX控件(只有75k), 这个控件主要实现对...
WebPrint4.0是由以前的... 合并后的WebPrint,是一个强大而全面的web打印解决方案,它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。
ActiveX是微软开发的一种技术,用于在Web浏览器中嵌入各种功能组件,但它的使用通常局限于Windows系统和IE浏览器。"ReYoPrint.CAB"是一个 CAB( Cabinet)文件,这是微软用于分发和安装ActiveX控件的标准格式。 在...
它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 ePrint内含一个在vc7.0上开发的ActiveX控件(180k), 这个控件主要实现对打印...
WEB打印控件Lodop是一种高效且易于使用的打印解决方案,专为解决网页打印问题而设计。它具有全浏览器兼容性的特点,支持包括Chrome、IE(Internet Explorer)以及360浏览器在内的多种主流浏览器,极大地拓宽了其应用...
它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP,PHP,.NET等动态程序生成的HTML页面。 ReYoPrint内含一个在vc7.0上开发的ActiveX控件(73k), 这个控件...
6. 退出注册表编辑器,重启IE浏览器,然后尝试打印,URL应该不再出现。 **方案二:设计按钮更改IE打印设置** 对于不熟悉或不习惯修改注册表的用户,可以通过编程的方式提供一个更友好的界面。这通常涉及到...
PDFjs是Adobe公司开源的一个JavaScript库,主要用于在Web浏览器中渲染PDF文档,无需...不过,考虑到IE浏览器逐渐被淘汰,也可以考虑引导用户升级到更现代的浏览器,或者提供其他打印解决方案,以获得更好的体验和性能。
然而,描述中提到“但是只支持IE浏览器”,意味着这种功能可能依赖于Internet Explorer特有的技术,例如ActiveX控件,这在现代浏览器(如Chrome、Firefox或Edge)中可能不被支持。 标签“office word”进一步确认了...
锐洋WEB打印控件作为一款专门针对IE浏览器的组件,可能需要定期检查更新,以确保其安全性,并适应不断变化的网络环境。 综上所述,锐洋WEB打印控件2009,1119,0,1618版本提供了全面的网页打印功能,特别适合那些需要...
//非IE浏览器 else if (window.ActiveXObject) LODOP = new ActiveXObject("CLodopfuncs"); //IE浏览器 if (LODOP == null) alert("未找到打印机控件,请先下载安装"); } ``` 3. **设置打印参数**:通过LODOP...
总的来说,这个插件下载控件通过提供兼容性良好的运行环境,解决了IE浏览器在web打印和预览上的问题。用户在使用时,需要按照`读我.txt`中的指导进行安装,确保`MSVCR90.dll`和`Microsoft.VC90.CRT.manifest`等关键...
这个控件允许网页与IE浏览器的打印功能交互。以下是一个基本的示例: ```html ``` 接着,我们可以添加各种打印相关的按钮,如“打印”、“直接打印”、“页面设置”和“打印预览”。这些按钮通过调用`WebBrowser...
首先,ScriptX控件是基于ActiveX技术的,这意味着它主要适用于IE浏览器。然而,随着现代浏览器的普及,如Chrome、Firefox和Safari,ScriptX也提供了JavaScript API来支持这些浏览器。在描述中提到的链接,我们可以...