如果不加下面的重點(diǎn)內(nèi)容，打印預(yù)覽的就沒有水印，水印會被壓在底下，當(dāng)然可以手動選擇背景，但是這樣水印就沒有意義了。
**
重點(diǎn)來了
/* 谷歌瀏覽器 /
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
/ 火狐瀏覽器 */
color-adjust: exact;
**
頁面css
@charset "utf-8";
/* html {background: #fcfcfc;
} */
.data-table {print-color-adjust: exact;color-adjust: exact;-webkit-print-color-adjust: exact;padding-bottom: 40px;margin-bottom: 40px;width: 100%;background-color: #fff;border-bottom: 2px dashed #eee;
}
.data-info {width: 100%;border: 0.5px solid #eee;
}
.data-info:first-child {border: 0.5px solid #eee;
}
.data-title {font-size: 20px !important;height: 52px;border-bottom: 0.5px solid #eee;border-right: none !important;text-align: center !important;
}
.data-info th {text-align: left;color: #333;
}
.data-tr-title th {height: 32px;color: #333;border-bottom: 0.5px solid #eee;border-right: 0.5px solid #eee;text-align: center;
}
.data-tr-title th:last-child {border-right: none;
}
.data-info td,
.data-info th {padding: 10px;font-size: 14px;border-bottom: 0.5px solid #eee;border-right: 0.5px solid #eee;
}
.data-info td {color: #333;
}
.data-info tr td:last-child {border-right: 0;
}
.data-info tr:last-child td,
.data-info tr:last-child th {/* border-right: 0.5px solid #eee; */border-bottom: none;
}
.data-label {font-weight: 550;
}
.data-quan {border-right: 1px solid #eee;/* border-bottom: 0; */
}
.data-center {text-align: center;
}
jquery.watermark.js
下載地址：jquery.watermark.js
/*** 給頁面添加文字水印* @author 海角在眼前*/
(function(){var watermark = function(self){this.elem = self;}watermark.prototype = {defaults : {texts : ['此處水印文字'],width : 100, //每行水印文字的水平間距height : 100, //水印文字的高度間距（低于文字高度會被替代）textRotate : -30 , //文字旋轉(zhuǎn) 度數(shù)textColor : '#e5e5e5', //文字顏色textFont : '14px 微軟雅黑' //字體},options : {canvas : []},init : function(options){$.extend(this.options, this.defaults, options);var $body = $('body'),can1 = this.__createCanvas($body),can2 = this.__createCanvas($body),canAll = this.__createCanvas($body),settings = this.options,txtlen = settings.texts.length;settings.deg = settings.textRotate * Math.PI / 180; //js里的正弦余弦用的是弧度this.__calcTextSize($body);var repeatTimes = Math.ceil(screen.width / settings.txts.length / settings.width);settings.canvasWidth = settings.canvasWidth * repeatTimes;var extTxts = [];while(repeatTimes--) extTxts = extTxts.concat(settings.txts);settings.txts = extTxts;var fixH = settings.maxWidth * Math.abs(Math.sin(settings.deg)) + Math.cos(settings.deg) * settings.textHeight;if(fixH > settings.height) settings.height = fixH;var ctx1 = this.__setCanvasStyle(can1, settings.canvasWidth, settings.height);var ctx2 = this.__setCanvasStyle(can2, settings.canvasWidth, settings.height);var ctx = this.__setCanvasStyle(canAll, settings.canvasWidth, settings.height * 2, true);this.__drawText(ctx1, settings.txts);this.__drawText(ctx2, settings.txts.reverse());//合并canvasctx.drawImage(can1, 0, 0, settings.canvasWidth, settings.height);ctx.drawImage(can2, 0, settings.height, settings.canvasWidth, settings.height);var dataURL = canAll.toDataURL("image/png");$(this.elem).css('backgroundImage', "url("+ dataURL +")");//this.__destory();},__createCanvas : function($container){var canvas = document.createElement('canvas');$container.append(canvas);this.options.canvas.push(canvas); return canvas;},__calcTextSize : function($container){var txts = [],maxWidth = 0,canvasWidth = 0,settings = this.options;$.each(settings.texts, function(i, text){var span = $('
<span style="font:'+settings.textFont+';visibility: hidden;display: inline-block;"> '+text+ '
</span>').appendTo($container);var tWidth = span[0].offsetWidth,tHeight = span[0].offsetHeight;span.remove();txts.push({txt : text,width : tWidth,height : tHeight});maxWidth = Math.max(maxWidth, tWidth);settings.textHeight = tHeight;var shadow = Math.cos(settings.deg) * tWidth;canvasWidth += (settings.width < shadow ? shadow : settings.width) - tHeight * Math.sin(settings.deg);});settings.txts = txts;settings.maxWidth = maxWidth;settings.canvasWidth = canvasWidth;},__setCanvasStyle : function(canvas, width, height, notextstyle){canvas.width = width;canvas.height = height;canvas.style.display='none';var ctx = canvas.getContext('2d');if(!notextstyle){var deg = this.options.deg,absSindeg = Math.abs(Math.sin(deg));ctx.rotate(deg);//基于視窗的 x、y偏移量var offset = absSindeg * this.options.height - this.options.textHeight * absSindeg;var nx = - offset * Math.cos(deg),ny = - offset * absSindeg;ctx.translate( nx, ny * absSindeg);ctx.font = this.options.textFont; ctx.fillStyle = this.options.textColor;ctx.textAlign = 'left'; ctx.textBaseline = 'Middle';}return ctx;},__drawText: function(ctx, txts){var settings = this.options;$.each(txts, function(i, obj){var wnap = (settings.maxWidth - obj.width) / 2 ;var x = settings.width * Math.cos(settings.deg) * i,y = - x * Math.tan(settings.deg) + settings.height;ctx.fillText(obj.txt, x + wnap, y);});},__destory : function(){$.each(this.options.canvas, function(i, canvas){canvas.remove();canvas = null;});}}$.fn.watermark = function(options){new watermark(this).init(options);}})(jQuery);
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="print.css"/></head><body><div class="data-table"><table class="data-info" border="0" cellspacing="0" cellpadding="0"><tr><th colspan="6" class="data-title">基本信息
</th></tr><tr><th>姓名：
</th><th>性別：
</th><th>年齡：
</th><th>身份證號：
</th><th>是否戶主：
</th><th>家庭住址：
</th></tr><tr><td>**
</td><td>男
</td><td>40
</td><td>******
</td><td>是
</td><td>中國大地上
</td></tr><tr><th>教育程度：
</th><th>政治面貌：
</th><th>職業(yè)：
</th><th>婚姻狀況：
</th><th>健康狀況：
</th><th>工作單位：
</th></tr><tr><td>小學(xué)
</td><td>團(tuán)員
</td><td>務(wù)農(nóng)
</td><td>已婚
</td><td>健康
</td><td>中國大地上
</td></tr><tr><th>個人年收入：
</th><th>其他收入情況：
</th><th>民間借貸：
</th><th>家庭負(fù)債：
</th><th>家庭收入明細(xì)：
</th><th>家庭年收入：
</th></tr><tr><td>120000
</td><td>暫無
</td><td>暫無
</td><td>0
</td><td>務(wù)農(nóng)收入，外出務(wù)工，其他
</td><td>140000
</td></tr><tr><th>家庭年支出：
</th><th>是否繳納五險一金：
</th><th>是否帶頭或工頭：
</th><th colspan="3">獲取就業(yè)信息渠道：
</th></tr><tr><td>100000
</td><td>是
</td><td>是
</td><td colspan="3">**、**等
</td></tr></table></div><script src="jquery-1.11.0.min.js" type="text/javascript"></script><script src="jquery.watermark.js" type="text/javascript"></script><script>$('.data-table').watermark({texts : ["這是水印"], textColor : "#eee", textFont : '20px 微軟雅黑', width : 200, height : 150, textRotate : -30 });</script></body>
</html>
總結(jié)
以上是生活随笔為你收集整理的jquery.watermark.js 在网页中添加水印，打印时水印背景不见了，办法来了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
