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

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

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

请看如下的一个页面

link.

1. 可以看到左上角的button link.

   //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控制水印的透明度

请看我的效果

link.

既然是一个这么简单的水印，干嘛要用js实现呢？

这样整个页面自上而下平均每800px的高度就有一个倾斜透明的水印文字啦~
由于页面较长信息量较大，不方便一一展示给大家看，但可以脑补：利用js创建水印所用的dom节点并按需要循环，有木有很方便!

答案肯定是：没有啦……。初学可以先从简单的HTML代码做起，也是可以实现的

我还是不太懂||你这个不够好

都可以在下方留言，提出你的疑问很高兴为你解答，也希望有大佬告诉我功能存在的不足十分感谢！