jquery 加水印斜角页面加水印js

转载

mob6454cc74c0fc 2024-01-04 14:52:48

文章标签 jquery 加水印斜角 css HTML js代码 文章分类 jQuery 前端开发

分享一个为js生成PDF添加水印的小技巧

程序员工作中有时我们会遇到这样的情况——客户为了生成档案的版权问题，要为生成的文本或者页面添加版权水印，以HTML代码页面生成PDF文件为例，介绍一下添加水印的一个简单实用的方法！

请看如下的一个页面

link.

jquery 加水印斜角页面加水印js_css

可以看到左上角的buttonlink.

//js方法
   function toPdf() {
	   		document.getElementById('btn').style.display='none';
     		for (var i = 0;i<12;i++) {//循环添加页面的水印
	  		var div1=document.createElement("div");
     		//创建一个能够覆盖页面宽度且有一定高度的容器承载水印
     	 		div1.className="wat";//为容器元素添加类名，用来调试设计相应的样式
     	 		div1.style.height="800px";//先设置个高度再说
     	 		//这里写死，需要根据body测量结果并动态添加循环次数的孩子不要着急
     	 		var div2=document.createElement("div");//创建一个调试水印文字样式的子容器
     	 		div2.className="watword";//添加样式类
     	 		var textNode = document.createTextNode("Hello world!");//通过js方法给子容器写一句要水印的文字
     	 		div2.appendChild(textNode);
     	 		//文字节点添加进容器
     	 		div1.appendChild(div2);
				//子容器添加到父类容器中  
				   	  	document.getElementById("exportToPdf").appendChild(div1);
				//父容器再添加到body中
	  	}

css水印样式哦……

上面给大家展示了js代码的准备，并给水印元素的两级容器添加了相应的样式类。大家可以简单的看一下这水印的css代码

.wat{
	width:1080px;
	z-index: 1000;
	font-family: "微软雅黑";
	color: rgba(0,0,0,0.1);
	font-size: 100px;
	margin: 0 auto;
}
.watword{
	text-align: center;
	transform: rotate(-40deg);
}

我的字体100px刚刚好，水印字体，可以改为喜欢的大小
文字要有一定的偏转要用到transform样式
透明度就不用说了吧，rgba控制水印的透明度