web打印难题—背景不打印的简单不完美解决方案
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="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的背景在打印时会显示为白色)也需要改造成图片形式。
总起来说,以上都比较麻烦,但是如果您的页面不是很复杂,又不想引入打印插件,可以尝试这种方法解决一下。有朋友还有更好的方案吗?
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· Open-Sora 2.0 重磅开源!