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

阅读更多

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

 

1、如图：

我想打印图中的投票结果条，该条之前是使用纯css实现，但是在IE上无法打印；目前是使用css背景+图片实现；

 

    .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浏览器都起作用；如图：

    
    
11111111111111111111111


    　

通过对图片进行绝对定位可以搞定。（对于Firefox div的背景在打印时会显示为白色）也需要改造成图片形式。

 

总起来说，以上都比较麻烦，但是如果您的页面不是很复杂，又不想引入打印插件，可以尝试这种方法解决一下。有朋友还有更好的方案吗？

 

• 
• 大小: 11.1 KB

• 
• 大小: 127 KB

• 查看图片附件