jquery.watermark.js 在网页中添加水印，打印时水印背景不见了，办法来了

最新推荐文章于 2024-04-06 09:55:18 发布

说学逗唱攻城狮

最新推荐文章于 2024-04-06 09:55:18 发布

阅读量4.5k

点赞数 3

分类专栏：前端文章标签： javascript jquery css

本文链接：https://blog.csdn.net/qq_34720531/article/details/121224979

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述
如果不加下面的重点内容，打印预览的就没有水印，水印会被压在底下，当然可以手动选择背景，但是这样水印就没有意义了。
**

重点来了

/* 谷歌浏览器 /
-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 , //文字旋转 度数
            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());

            //合并canvas
            ctx.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>职业：</th>
					<th>婚姻状况：</th>
					<th>健康状况：</th>
					<th>工作单位：</th>
				</tr>
				<tr>
					<td>小学</td>
					<td>团员</td>
					<td>务农</td>
					<td>已婚</td>
					<td>健康</td>
					<td>中国大地上</td>
				</tr>
				<tr>
					<th>个人年收入：</th>
					<th>其他收入情况：</th>
					<th>民间借贷：</th>
					<th>家庭负债：</th>
					<th>家庭收入明细：</th>
					<th>家庭年收入：</th>
				</tr>
				<tr>
					<td>120000</td>
					<td>暂无</td>
					<td>暂无</td>
					<td>0</td>
					<td>务农收入，外出务工，其他</td>
					<td>140000</td>
				</tr>
				<tr>
					<th>家庭年支出：</th>
					<th>是否缴纳五险一金：</th>
					<th>是否带头或工头：</th>
					<th colspan="3">获取就业信息渠道：</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 //-90到0， 负数值，不包含-90
		});
		
	</script>
		 
	</body>
</html>

说学逗唱攻城狮

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
jquery.watermark.js 在网页中添加水印，打印时水印背景不见了，办法来了

如果不加下面的重点内容，打印预览的就没有水印，水印会被压在底下，当然可以手动选择背景，但是这样水印就没有意义了。**重点来了/* 谷歌浏览器 /-webkit-print-color-adjust: exact;print-color-adjust: exact;/ 火狐浏览器 */color-adjust: exact;**页面css@charset "utf-8";/* html { background: #fcfcfc;} */.data-table { prin.
复制链接

扫一扫