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的背景在打印時會顯示為白色）也需要改造成圖片形式。

 

總起來說，以上都比較麻煩，但是如果您的頁面不是很復雜，又不想引入打印插件，可以嘗試這種方法解決一下。有朋友還有更好的方案嗎？