web打印在一些开发中是比较常见的需求,最简单的办法是使用css print进行控制;对于一些建议可以参考http://slodive.com/web-development/css-print-page-tricks/;但是有时候我们需要设置背景或者其他类似的功能;如果不引入浏览器插件,我尝试了一下方法进行解决。
1、如图:
我想打印图中的投票结果条,该条之前是使用纯css实现,但是在IE上无法打印;目前是使用css背景+图片实现;
<div class="myprogress" title="${percent}%"> <img class="mybar" src="${ctx}/static/images/bar.png" style="width: ${percent}%!important;"/> </div>
.myprogress { background: #f5f5f5!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); } .mybar { width: 100%!important; margin-top: -5px; height: 18px; } @media print { body {-webkit-print-color-adjust: exact;} .no-print {display: none;} }
其中: body {-webkit-print-color-adjust: exact;} + background: #f5f5f5!important; 对chrome有效;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);对IE有效(测试使用IE8,其他版本未测试);但是对firefox还是无效。
2、使用position:absolute的图片解决;这种方式麻烦,但是对IE、Firefox、Chrome浏览器都起作用;如图:
<div class="container"> <img class="myimg" src="http://sishuok.com/common/images/enterprise/image2.jpg"/> <div class="mydiv">11111111111111111111111</div> </div> <div style="margin-top: 400px;"> <input type='button' class="no-print btn" value='打印' onclick='javascript:window.print()'/> </div>
<style media="all"> .myimg { position: absolute; top:0; left: 0; width: 500px; } .mydiv { position: absolute; top: 0; left: 0; color: blue; background: red!important; filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='red',EndColorStr='red'); } @media print { body {-webkit-print-color-adjust: exact;} } </style>
通过对图片进行绝对定位可以搞定。(对于Firefox div的背景在打印时会显示为白色)也需要改造成图片形式。
总起来说,以上都比较麻烦,但是如果您的页面不是很复杂,又不想引入打印插件,可以尝试这种方法解决一下。有朋友还有更好的方案吗?
相关推荐
Web打印的解决方案之普通报表打印 .docWeb打印的解决方案之普通报表打印 .docWeb打印的解决方案之普通报表打印 .docWeb打印的解决方案之普通报表打印 .docWeb打印的解决方案之普通报表打印 .docWeb打印的解决方案之...
WebPrint是一个全面强大的web打印的解决方案。它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 WebPrint内含一个在vc7.0上开发...
WEB打印组件包解决web打印问题 不用为web打印烦恼
web打印方法web打印方法web打印方法web打印方法web打印方法
对各种方案分析之后,对web在重业务场景的打印需求(比如直接打印,无预览直接打印,特定格式打印)梳理之后,确定了一个生产环节最佳的WEB打印方案,纯JS通过post提交数据到打印伺服器的方案。 1. js可以脱离语言...
18.如何打印幅面高度不固定的票据见样例十八 19.如何内嵌显示及预览时包含背景图见样例十九 20.如何强制分页并预览多页卡片见样例二十 21.如何控制打印维护的功能权限见样例二十一 22.如何构建自己的纯WEB打印预览见...
【Delphi WEB打印服务】通过请求api,实现打印设计、打印预览、打印,即可做到本地和远程打印
WEB打印,打印预览,打印分印,打印设置(能实现一般的WEB打印)WEB打印,打印预览,打印分印,打印设置(能实现一般的WEB打印)
WEB打印控件WEB打印控件WEB打印控件WEB打印控件WEB打印控件WEB打印控件WEB打印控件WEB打印控件WEB打印控件WEB打印控件
ePrint是一个全面强大的web打印的解决方案。它可以直接在IE浏览器中可视化的设计各种复杂的打印模版, 轻松解决Web套打问题。也可以直接打印用ASP,JSP等动态程序生成的HTML页面。 ePrint内含一个在vc7.0上开发的...
免费web打印控件免费web打印控件免费web打印控件免费web打印控件免费web打印控件
ASP.NET中实现Web打印的方案 ASP.NET中实现Web打印的方案 ASP.NET中实现Web打印的方案
杰表云打印JCP(Jatools Cloud Print)是一款Web打印软件,使用该软件,可以: 打印网页格式的票据,报表等; 打印Web上的 Word、Excel、PowerPoint、WPS、PDF文档; 通过 Javascript API 实现一键打印,无须人工干预;...
本程序主要是为了解决WEB生成条码打印不好控制的难题,通过Web简单调用脚本,即可实现不同尺寸条码的打印。 一、主要功能 1、WEB条码打印(一维码或二维码兼容其他图案、图片的输出打印); 2、可实现不同纸张...
asp.net简单实现web打印功能,效果还不错
简单方便的web打印编辑器
Web打印控件,完美解决以下HTML打印难题 1.Web Html 分页打印 2.内容、图片、表格跨页断裂,封边 3.table并行、并列双边、重边 4.自动计算页码(总数及每一页),样式、位置、形式完全个性化 5.页眉页脚,去除浏览...
Asp Net中实现web打印的方案