欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

web打印—背景不打印的简单不完美解决方案

程序员文章站 2022-04-07 21:01:55
...

web打印在一些开发中是比较常见的需求,最简单的办法是使用css print进行控制;对于一些建议可以参考http://slodive.com/web-development/css-print-page-tricks/;但是有时候我们需要设置背景或者其他类似的功能;如果不引入浏览器插件,我尝试了一下方法进行解决。

 

1、如图:

web打印—背景不打印的简单不完美解决方案
            
    
    博客分类: java开发常见问题分析 web printweb打印 
我想打印图中的投票结果条,该条之前是使用纯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浏览器都起作用;如图:

web打印—背景不打印的简单不完美解决方案
            
    
    博客分类: java开发常见问题分析 web printweb打印 

<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打印—背景不打印的简单不完美解决方案
            
    
    博客分类: java开发常见问题分析 web printweb打印 
  • 大小: 11.1 KB
  • web打印—背景不打印的简单不完美解决方案
            
    
    博客分类: java开发常见问题分析 web printweb打印 
  • 大小: 127 KB
相关标签: web print web打印