需求：

1.?打印頁面中部分的內容，并為其添加背景水印效果

2. 水印圖片只在打印時出現。

3. 要求水印必須可以隨著打印內容長度的增長而repeat

4.無法手動去除水印

問題分析：

1. 在此需求的制作過程中，遇到過各種問題，比如，通常各個瀏覽器會對自帶的打印機功能進行手動設置，在打印預覽界面可以用戶可以手動勾選是否顯示背景圖片和顏色，這就使得css中的background-image以及background-color屬性無法滿足效果。

　此時，只能使用img標簽在頁面添加水印。

2. 這時候新的問題又出現了，img標簽所添加的圖片是不可以repeat，并且如果想img作為背景出現。

? 處于以上問題，想到可以使用jquery來實現img的repeat，并使用css中的層控制來實現img作為背景在打印信息的下面出現。

實現：

css（使用定位將圖片文字按照層級顯示）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.image{// 沒有打印時水印圖片不顯示 ???? display : none ; } @media print { ???? .image{//使用相對定位將水印圖片層級往下，顯示成背景效果 ???????? position : relative ; ???????? top : 0px ; ???????? z-index : -100px ; ???????? width : 700px ; ???????? display : inline ; ???? } ???? .text{//使用絕對定位將需要打印的內容的層級往上顯示，并設置顯示的位置 ???????? position : absolute ; ???????? top : 190px ; ???????? z-index : 100px ; ???????? width : 700px ; ???? } ???? #sub-nav, #header-container, #nav-container, #footer{//將頁面不需要打印的部分隱藏 ???????? display : none ; ???? } }

?

html:

1 2 3 4

< div class="image" id="a"></ div > < div class="text" id="text"> ???? This is messages...... </ div >

　　

Jquery（獲取text的div區域大小并計算使水印圖片按照文字的長度進行repeat）：　　

1 2 3 4 5 6 7 8 9 10

<script type= "text/javascript" src= "jquery-1.4.4.min.js" ></script> <script> ???? $(document).ready( function (){ ???? var conHeight = $( "#text" ).height(); ???? var conWidth = $( "#text" ).width(); ???? var num = Math.ceil(conHeight*conWidth/800/855); ???? for (i=0;i<num;i++) ???????? $( '#a' ).append( '<img src="waterMarkUrl" />' ); ???? }); </script>

總結：

在使用定位布局時，需要注意頁面布局是否變化，必要時需要清除浮動使頁面布局不受影響。

總結

以上是生活随笔為你收集整理的JSP页面使用js直接打印页面信息加载水印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。