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的背景在打印時會顯示為白色)也需要改造成圖片形式。
?
總起來說,以上都比較麻煩,但是如果您的頁面不是很復雜,又不想引入打印插件,可以嘗試這種方法解決一下。有朋友還有更好的方案嗎?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元

