`
flex_莫冲
  • 浏览: 1091878 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

如何解决非IE浏览器的web打印

 
阅读更多
非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
分享到:
评论
1 楼 July01 2017-11-07  
推荐用StratoIO打印控件,支持网页、URL、图片、PD、ZPL和EPL,浏览器和系统的兼容性都很好,
而且不会崩溃。页头页脚、页码都能定制。参考http://www.webprinter.cn/features

相关推荐

    非IE浏览器实现IE功能.rar

    标题“非IE浏览器实现IE功能.rar”所涉及的知识点主要集中在如何在非Internet Explorer(IE)浏览器上模拟或实现IE特有的功能,特别是针对OCX(ActiveX Control)控件的加载。描述中提到的“IE Tab”是一个插件,...

    ie浏览器 js调用 ocx 异步打印pdf、图片控件

    总的来说,这个解决方案提供了一种在IE浏览器中通过JavaScript控制OCX控件实现异步打印PDF和图片的方法,特别适合自助终端等应用场景。需要注意的是,由于依赖于ActiveX和IE浏览器,这个方案可能不适用于其他非IE...

    支持IE浏览器的web打印控件和使用方法.zip

    本压缩包提供的"支持IE浏览器的web打印控件和使用方法.zip"包含了一个名为"smsx.cab"的文件,这是一个ActiveX控件,专为IE浏览器设计,用于实现网页内容的直接打印。 ActiveX是微软推出的一种技术,它允许开发人员...

    IE的smsx控件,可以通过js控制IE的web打印

    **IE的smsx控件**是一种专为Internet Explorer设计的浏览器控件,它允许开发者通过JavaScript来实现对IE浏览器的Web打印功能的精细控制。在传统的Web应用中,浏览器的打印功能往往比较基础,可能无法满足一些特定的...

    斑马Magicard打印机 IE浏览器打印插件

    斑马Magicard打印机的IE浏览器打印插件是基于IE浏览器的ActiveX技术,ActiveX是一种由微软开发的技术,用于在Web页面上提供丰富的交互式体验。这个插件作为一个控件,嵌入到IE浏览器中,使得用户无需下载文件或离开...

    webprint 一个全面强大的web打印的解决方案

    它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 WebPrint内含一个在vc7.0上开发的ActiveX控件(只有75k), 这个控件主要实现对...

    webprint web打印控件

    WebPrint4.0是由以前的... 合并后的WebPrint,是一个强大而全面的web打印解决方案,它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。

    免费web打印控件免费web打印控件

    ActiveX是微软开发的一种技术,用于在Web浏览器中嵌入各种功能组件,但它的使用通常局限于Windows系统和IE浏览器。"ReYoPrint.CAB"是一个 CAB( Cabinet)文件,这是微软用于分发和安装ActiveX控件的标准格式。 在...

    锐洋Java Web打印控件

    它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 ePrint内含一个在vc7.0上开发的ActiveX控件(180k), 这个控件主要实现对打印...

    WEB 打印控件Lodop,全兼容各浏览器chrome,ie,360

    WEB打印控件Lodop是一种高效且易于使用的打印解决方案,专为解决网页打印问题而设计。它具有全浏览器兼容性的特点,支持包括Chrome、IE(Internet Explorer)以及360浏览器在内的多种主流浏览器,极大地拓宽了其应用...

    ReYoPrint web打印控件

    它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP,PHP,.NET等动态程序生成的HTML页面。 ReYoPrint内含一个在vc7.0上开发的ActiveX控件(73k), 这个控件...

    IE打印有URL解决方案

    6. 退出注册表编辑器,重启IE浏览器,然后尝试打印,URL应该不再出现。 **方案二:设计按钮更改IE打印设置** 对于不熟悉或不习惯修改注册表的用户,可以通过编程的方式提供一个更友好的界面。这通常涉及到...

    ie PDFjs 打印只需要1分总可以吧

    PDFjs是Adobe公司开源的一个JavaScript库,主要用于在Web浏览器中渲染PDF文档,无需...不过,考虑到IE浏览器逐渐被淘汰,也可以考虑引导用户升级到更现代的浏览器,或者提供其他打印解决方案,以获得更好的体验和性能。

    在网页中编辑office word excel文件_效果跟office word一模一样.但是只支持IE浏览器.zip

    然而,描述中提到“但是只支持IE浏览器”,意味着这种功能可能依赖于Internet Explorer特有的技术,例如ActiveX控件,这在现代浏览器(如Chrome、Firefox或Edge)中可能不被支持。 标签“office word”进一步确认了...

    锐洋WEB打印控件最新

    锐洋WEB打印控件作为一款专门针对IE浏览器的组件,可能需要定期检查更新,以确保其安全性,并适应不断变化的网络环境。 综上所述,锐洋WEB打印控件2009,1119,0,1618版本提供了全面的网页打印功能,特别适合那些需要...

    最新实用的web打印控件

    //非IE浏览器 else if (window.ActiveXObject) LODOP = new ActiveXObject("CLodopfuncs"); //IE浏览器 if (LODOP == null) alert("未找到打印机控件,请先下载安装"); } ``` 3. **设置打印参数**:通过LODOP...

    web打印和预览的插件下载控件

    总的来说,这个插件下载控件通过提供兼容性良好的运行环境,解决了IE浏览器在web打印和预览上的问题。用户在使用时,需要按照`读我.txt`中的指导进行安装,确保`MSVCR90.dll`和`Microsoft.VC90.CRT.manifest`等关键...

    .NET web打印

    这个控件允许网页与IE浏览器的打印功能交互。以下是一个基本的示例: ```html ``` 接着,我们可以添加各种打印相关的按钮,如“打印”、“直接打印”、“页面设置”和“打印预览”。这些按钮通过调用`WebBrowser...

    使用ScriptX控件实现web打印

    首先,ScriptX控件是基于ActiveX技术的,这意味着它主要适用于IE浏览器。然而,随着现代浏览器的普及,如Chrome、Firefox和Safari,ScriptX也提供了JavaScript API来支持这些浏览器。在描述中提到的链接,我们可以...

Global site tag (gtag.js) - Google Analytics