jquery.watermark.js 在网页中添加水印，打印时水印背景不见了，办法来了 |
您所在的位置：网站首页 › 网站打印怎么才有水印 › jquery.watermark.js 在网页中添加水印，打印时水印背景不见了，办法来了 |
jquery.watermark.js 在网页中添加水印，打印时水印背景不见了，办法来了
|
/* 谷歌浏览器 / -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 = $(' '+text+ '') .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> 基本信息 姓名： 性别： 年龄： 身份证号： 是否户主： 家庭住址： ** 男 40 ****** 是 中国大地上 教育程度： 政治面貌： 职业： 婚姻状况： 健康状况： 工作单位： 小学 团员 务农 已婚 健康 中国大地上 个人年收入： 其他收入情况： 民间借贷： 家庭负债： 家庭收入明细： 家庭年收入： 120000 暂无 暂无 0 务农收入，外出务工，其他 140000 家庭年支出： 是否缴纳五险一金： 是否带头或工头： 获取就业信息渠道： 100000 是 是 **、**等 $('.data-table').watermark({ texts : ["这是水印"], //水印文字 textColor : "#eee", //文字颜色 textFont : '20px 微软雅黑', //字体 width : 200, //水印文字的水平间距 height : 150, //水印文字的高度间距（低于文字高度会被替代） textRotate : -30 //-90到0， 负数值，不包含-90 }); |
如果不加下面的重点内容，打印预览的就没有水印，水印会被压在底下，当然可以手动选择背景，但是这样水印就没有意义了。 **【本文地址】
今日新闻 |
推荐新闻 |