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

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

请看如下的一个页面

link.

可以看到左上角的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代码做起，也是可以实现的

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

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

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

分享一个一分钟就学会的vue小技巧（真的一看就会～～）
一.内容简介在使用vue开发时,经常会封装很多的组件方便复用,那么难免就有写样式相关组件,比如需要使用时传入颜色.高度等样式参数.那么问题来了:我们要怎么在样式中使用组件中接收的参数呢?或者说,我们 ...
【Android应用开发】分享一个录制 Android 屏幕 gif 格式的小技巧
因为写博客总是需要录制 Android 软件的演示效果, 研究了将近一小时找到了合适的工具; 录制流程 : -- 1. 录制 Android 手机屏幕内容 : 使用拍大师软件录制 Android ...
php操作pdf文档输出,PHP生成PDF文档实用技巧
PHP生成PDF文档实用技巧实际工作中,我们要使用PHP动态的创建PDF文档,目前有许多开源的PHP创建PDF的类库,今天我给大家来介绍一款优秀的PDF库,它就是TCPDF,TCPDF是一个用于快速 ...
分享一个 Python + Django 实现的电商小项目
编辑:业余草来源:https://www.xttblog.com/?p=4944 分享一个 Python + Django 实现的电商小项目. 如果自学 Python,那么爬虫和电商项目将是你跳不过 ...
一个 15 年 SAP ABAP 开发人员分享的 SAPGUI 一些个性化设置和实用小技巧试读版
零基础 ABAP 学习教程系列文章的目录 ABAP 标准培训教程 BC400 学习笔记之一:ABAP 服务器的架构和一个典型的 ABAP 程序结构介绍 ABAP 标准培训教程 BC400 学习笔记之二 ...
【Python】潜水小白，分享一个简单基础的tkinter的猜拳小游戏
潜水小白,分享一个简单基础的tkinter的猜拳小游戏没什么技巧,代码如下,喜欢的可以试验一下. 图片是我自己的,可一手动换成你想要的(tkinter默认好像支持gif格式的,其它好像要转换一下,另 ...
html前端使用js生成pdf文件并保存到本地
安装jspdf和html2canvas依赖,其中jspdf是文件保存操作,html2canvas是为了将内容转换为canvas图片 npm install jspdf html2canvas --sa ...
用js生成PDF的方案
在java里,我们常用Itext来生成pdf,在pdf文件里组合图片,文字,画表格,画线等操作,还会遇到中文支持的问题. 那好,现在想直接在web前端就生成pdf怎么办,目前有以下几个解决方案 1:J ...
记录一个有关QT生成PDF的过程
直接上代码,代码中添加注释进行解释,方便自己和大家研究. 首先是头文件 genpdf.h #ifndef GENPDF_H #define GENPDF_H#include <QObject&g ...

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

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

请看如下的一个页面

css水印样式哦……

请看我的效果

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

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

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

最新文章

热门文章