HTML页面实现打印时有水印功能

本文档包含水印背景图片、水印背景文字 2 种功能实现。

以下 2 种方法实现了打印附带水印，浏览页面是不显示水印功能。并可很简单就改成在以上 2 种状态时都显示水印的状态。

1、水印图片

实现思路：使用 img 标签引入图片作为水印图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css" media="screen">body {background-color: #eee;}#two {width: 640px;height: 840px;margin: 0 auto;padding: 10px 15px;background-color: #FFFFFF;margin-top: 10px;position: relative;z-index: 1;}#two-bg img {display: none;}</style><style media="print">#two-bg {position: absolute;top: 0;right: 0;left: 0;z-index: 0;width: 100%;height: 100%;}#two-bg img {display: block;width: 300px;opacity: .3;transform: rotate(-20deg);-ms-transform: rotate(-20deg);-moz-transform: rotate(-20deg);-webkit-transform: rotate(-20deg);-o-transform: rotate(-20deg);margin: 0 auto;margin-top: 190px;}</style>
</head><body><input type="button" name="print" value="print" onclick="javascript:testprint();" /><!--使用定位添加水印，正常显示网页时不显示水印图片，点击打印预览时才显示--><div id="two"><article>阿Q没有家，住在未庄的土谷祠②里；也没有固定的职业，只给人家做短工，割麦便割麦，舂米便舂米，撑船便撑船。工作略长久时，他也或住在临时主人的家里，但一完就走了。所以，人们忙碌的时候，也还记起阿Q来，然而记起的是做工，并不是“行状”；一闲空，连阿Q都早忘却，更不必说“行状”了。只是有一回，有一个老头子颂扬说：“阿Q真能做！”这时阿Q赤着膊，懒洋洋的瘦阿Q又很自尊，所有未庄的居民，全不在他眼神里，甚而至于对于两位“文童”③也有以为不值一笑的神情。夫文童者，将来恐怕要变秀才者也；赵太爷钱太爷大受居民的尊敬，除有钱之外，就因为都是文童的爹爹，而阿Q在精神上独不表格外的崇奉，他想：我的儿子会阔得多啦！加以进了几回城，阿Q自然更自负，然而他又很鄙薄城里人，譬如用三尺三寸宽的木板做成的凳子，未庄人叫“长凳”，他也叫“长凳”，城里人却叫“条凳”，他想：这是错的，可笑！油煎大头鱼，未庄都加上半寸长的葱叶，城里却加上切细的葱丝，他想：这也是错的，可笑！然而未庄人真是不见世面的可笑的乡下人呵，他们没有见过城里的煎鱼！谁知道阿Q采用怒目主义之后，未庄的闲人们便愈喜欢玩笑他。一见面，他们便假作吃惊的说：哙，亮起来了。”</article><!--图片透明 png 格式的图片--><div id="two-bg"><img src="img/logo.jpg" /><img src="img/logo.jpg" /><img src="img/logo.jpg" /></div></div><script>function testprint() {var body = document.getElementById("two")document.body.innerHTML = body.innerHTMLwindow.print()}// 打印后或取消后重载页面，因为打印预览弹框弹出后会导致样式爆炸window.onafterprint = function () {location.reload()}</script>
</body></html>

2、水印文字

实现思路：网上找的，不大清楚

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css" media="screen">body {background-color: #eee;}#two {margin: 0 auto;width: 640px;padding: 10px 15px;background-color: #fff;margin-top: 10px;position: relative;z-index: 1;}</style><style media="print">input {display: none;}#two {padding: 10px 15px;background-color: #fff;margin-top: 10px;position: relative;}</style>
</head><body><input type="button" name="print" value="print" onclick="javascript:testprint();" /><!--使用定位添加水印，正常显示网页时不显示水印图片，点击打印预览时才显示--><div id="two"><ul><li>这是第1个</li><li>这是第2个</li><li>这是第3个</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li><li>这是第3个</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩做做做做做做做做做</li><li>这是第4个</li><li>扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</li><li>这是一大段文字照着找着做做做做做做做做做做做做做做做</li></ul></div><script src="js/jquery-1.8.3.min.js"></script><!-- <script src="js/watermark.jquery.min.js"></script> --><script type="text/javascript">function testprint() {watermark({ watermark_txt: "温州机场" })//传入动态水印内容window.print()}window.onafterprint = function () {location.reload()}function watermark(settings) {//默认设置var defaultSettings = {watermark_txt: "text",watermark_x: 100,//水印起始位置x轴坐标watermark_y: 20,//水印起始位置Y轴坐标watermark_rows: 20,//水印行数watermark_cols: 20,//水印列数watermark_x_space: 100,//水印x轴间隔watermark_y_space: 50,//水印y轴间隔watermark_color: '#bd1b21',//水印字体颜色watermark_alpha: 0.3,//水印透明度watermark_fontsize: '18px',//水印字体大小watermark_font: '微软雅黑',//水印字体watermark_width: 120,//水印宽度watermark_height: 80,//水印长度watermark_angle: 15//水印倾斜度数};//采用配置项替换默认值，作用类似jquery.extendif (arguments.length === 1 && typeof arguments[0] === "object") {var src = arguments[0] || {};for (key in src) {if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])continue;else if (src[key])defaultSettings[key] = src[key];}}var oTemp = document.createDocumentFragment();//获取页面最大宽度var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);//获取页面最大长度var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight);//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔if (defaultSettings.watermark_cols == 0 ||(parseInt(defaultSettings.watermark_x+ defaultSettings.watermark_width * defaultSettings.watermark_cols+ defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1))> page_width)) {defaultSettings.watermark_cols =parseInt((page_width- defaultSettings.watermark_x+ defaultSettings.watermark_x_space)/ (defaultSettings.watermark_width+ defaultSettings.watermark_x_space));defaultSettings.watermark_x_space =parseInt((page_width- defaultSettings.watermark_x- defaultSettings.watermark_width* defaultSettings.watermark_cols)/ (defaultSettings.watermark_cols - 1));}//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔if (defaultSettings.watermark_rows == 0 ||(parseInt(defaultSettings.watermark_y+ defaultSettings.watermark_height * defaultSettings.watermark_rows+ defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1))> page_height)) {defaultSettings.watermark_rows =parseInt((defaultSettings.watermark_y_space+ page_height - defaultSettings.watermark_y)/ (defaultSettings.watermark_height + defaultSettings.watermark_y_space));defaultSettings.watermark_y_space =parseInt((page_height- defaultSettings.watermark_y- defaultSettings.watermark_height* defaultSettings.watermark_rows)/ (defaultSettings.watermark_rows - 1));}var x;var y;for (var i = 0; i < defaultSettings.watermark_rows; i++) {y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;for (var j = 0; j < defaultSettings.watermark_cols; j++) {x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;var mask_div = document.createElement('div');mask_div.id = 'mask_div' + i + j;mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));//设置水印div倾斜显示mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.visibility = "";mask_div.style.position = "absolute";mask_div.style.left = x + 'px';mask_div.style.top = y + 'px';mask_div.style.overflow = "hidden";mask_div.style.zIndex = "9999";//mask_div.style.border="solid #eee 1px";mask_div.style.opacity = defaultSettings.watermark_alpha;mask_div.style.fontSize = defaultSettings.watermark_fontsize;mask_div.style.fontFamily = defaultSettings.watermark_font;mask_div.style.color = defaultSettings.watermark_color;mask_div.style.textAlign = "center";mask_div.style.width = defaultSettings.watermark_width + 'px';mask_div.style.height = defaultSettings.watermark_height + 'px';mask_div.style.display = "block";oTemp.appendChild(mask_div);};};document.body.appendChild(oTemp);}</script>
</body></html>

HTML页面实现打印时有水印功能相关推荐

html页面实现打印预览功能,js实现打印、页面设置、打印预览功能
javascript打印-打印页面设置-打印预览代码 function printsetup(){ // 打印页面设置 wb.execwb(8,1); } function printpreview( ...
Vue项目在页面添加水印及在某一个页面去除水印功能
项目需求 (1)系统内页面出现水印: (2)登录页面没有水印[备注:退出登录时,登录页面不会显示水印**] 创建水印创建watermark.js文件 # 创建水印功能网上一大把,随便搜一下 'use ...
多页面分页打印功能实现
这篇文章主要记录自己在做项目时,遇到某个页面信息通过复选框的操作,多个页面同时打印的功能,因为本身window.print()只能打印一张,遇到多个页面时会开多个页面然后进程中断的现象. 像这边选中了 ...
html页面实现打印功能
html页面实现打印功能可用代码效果截图之前领导让我写一个html页面,可以进行打印,我上网搜了一下,html页面实现打印功能的博客有很多,这里我就不一一介绍了,直接上干货. 可用代码 < ...
Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）
Vue 使用 vue-print-nb 插件实现打印功能一. vue-print-nb 的使用 1.1 安装 vue-print-nb 1.2. 引入vue-print-nb 二. 一个打印实例使 ...
用JS在html页面实现打印功能
用JS在html页面实现打印功能打印方式一: 打印方式二: 打印方式三(此方式会重新打开一个浏览器窗口): 做项目时,有在网页实现全局和局部打印的需求,百度许久,现总结如下: 打印方式一: 1.首先 ...
java实现分页打印功能_web 页面分页打印的实现
1．首先引入一个WebBrowser在需要打印的页面,可以直接添加: 复制代码代码如下: 到页面,或者使用javascript在需要的时候临时添加也可以: 复制代码代码如下: document.b ...
七牛云转码_YYC松鼠短视频系统V2.0版本发布，亮点新增转码加水印功能
YYC松鼠短视频系统V2.0版本发布,亮点新增转码加水印功能 YYC松鼠短视频系统2020年03月18日V2.0日志: 1.新增上传视频自动转码添加水印功能,水印可以设定四个位置,左上角,右上角,左下 ...
aspose转pdf横版_Aspose实现文件转PDF在线预览及水印功能
文件转换及在线预览因为项目是做OA这一块,有很多附件需要实现在线预览附件,在网上也看了很多相关的资料.主要实现方式就是 (openoffice+swftools+flexpaper)和(aspose ...

HTML页面实现打印时有水印功能

HTML页面实现打印时有水印功能相关推荐

最新文章

热门文章