vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）

需求：在h5网页中打开pdf文件，要求给文件添加水印

实现技术及插件:vue，vue-pdf,canvas

插件安装:

npm i vue-pdf --save
npm i pdf-lib --save

原理：实现pdf预览，在显示pdf的容器上添加一层遮罩，用来存放水印

具体实现代码详细介绍:

<template><div><div class="content"><div id="myIframe" style="max-width: 1700px; min-height: 1550px; position: relative; margin: 0 auto"><pdf id="pdfBox" :page="pageNum" :src="fileUrl" @progress="loadedRatio = $event" @num-pages="totalPages = $event"></pdf></div></div><span slot="footer" class="dialog-footer"><div class="btnGroup" v-if="totalPages"><div class="pageNum">{{ pageNum }} / {{ totalPages }}</div><el-button-group><el-button round plain type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button><el-button round plain type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group></div></span></div></template>

相关解释:

:page 从第几页开始显示

:src:pdf存放路径

@progress文档加载进度。范围[0，1]

@num-pages给定pdf中所有页面的总和

有可能会报的错误提示pdf打不开，报如下问题：

Warning: getHexString - ignoring invalid character: 33
Warning: getHexString - ignoring invalid character: 79
Warning: getHexString - ignoring invalid character: 84
Warning: getHexString - ignoring invalid character: 89
Warning: getHexString - ignoring invalid character: 80
Warning: getHexString - ignoring additional invalid characters.

需要注意，在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方，引用的方式也有讲究，具体看这篇文章：

vue中本地pdf文件加载错误，文件不显示_vue-pdf 不显示_生活的小欢呼的博客-CSDN博客

pdf预览相关方法：

    // 获取PDF总页数getPageNum() {let loadingTask = pdf.createLoadingTask(this.fileUrl);loadingTask.promise.then((pdf) => {this.totalPages = pdf.numPages;console.log(this.totalPages)this.$nextTick(() => {this.setWatermarkContent();});}).catch((err) => {this.$message.warning("pdf加载失败");});},// 上一页prePage() {let page = this.pageNum;page = page > 1 ? page - 1 : this.totalPages;this.pageNum = page;window.scrollTo(0, 0);},// 下一页nextPage() {let page = this.pageNum;page = page < this.totalPages ? page + 1 : 1;this.pageNum = page;window.scrollTo(0, 0);},

添加水印方法：

      setWatermarkContent() {// 1.创建canvas容器,绘制水印let ele = document.createElement("canvas");//设置水印元素的宽高ele.width = 250;ele.height = 200;let str ="测试水印"let ctx = ele.getContext("2d");//绘制2d图形ctx.font = `${20}px ${"microsoft yahei"}` // 设置水印文字的大小和字体ctx.rotate((-25 * Math.PI) / 180);// 设置水印元素的倾斜, 这一行代码要写在设置水印文字之前，涉及样式的都写在设置水印文字之前ctx.fillStyle = "#dadbdc" // 设置水印文字的颜色ctx.textAlign = 'left'; // 文本左对齐ctx.fillText(str, ele.width / 6, ele.height / 2);// 设置水印文字// 2.将水印canvas遮罩层作为背景图，添加到div中let div = document.createElement("div");div.style.pointerEvents = "none";// 元素永远不会成为鼠标事件的targetdiv.style.top = "0";div.style.left = "0px";div.style.position = "fixed";// 固定定位, 让元素撑满整个可视区域div.style.background = "url(" + ele.toDataURL("image/png") + ") left top repeat";// 水印图片做div的背景,并且重复，这样看起来就是满屏都是水印let width = document.getElementById("pdfBox").clientWidth ; //设置div的宽高let height = document.getElementById("pdfBox").clientHeight;div.style.width = width + "px";div.style.height = height + "px";div.style.zIndex = 999999 // 水印元素的权值设得大一些，以此来遮盖所有的元素// 3.div添加到body元素，水印生成document.getElementById("myPdf").appendChild(div);}

补充：直接覆盖上去，就类似于添加了一个蒙版，因此是无法触发底下图层的事件的，所以就用到了一个css属性pointer-events。

pointer-events:none的作用不只是禁用链接hover，打开链接等效果，是真实意义上的将onlick事件去掉了，能让元素实体虚化，虽然存在这个元素，但是该元素不会触发鼠标事件。

完整代码:

<template><div><div class="content"><div id="myPdf" style="max-width: 1700px; min-height: 1550px; position: relative; margin: 0 auto"><pdf id="pdfBox" :page="pageNum" :src="fileUrl" @progress="loadedRatio = $event" @num-pages="totalPages = $event"></pdf></div></div><span slot="footer" class="dialog-footer"><div class="btnGroup" v-if="totalPages"><div class="pageNum">{{ pageNum }} / {{ totalPages }}</div><el-button-group><el-button round plain type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button><el-button round plain type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group></div></span></div></template><script>import pdf from "vue-pdf";export default {components: {pdf,},data() {return {pageNum: 1, //显示第一页loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了totalPages: 0, //pdf总页数fileUrl:"/static/solr高级篇(上).pdf",};},mounted() {this.getPageNum();},methods: {// 获取PDF总页数getPageNum() {let loadingTask = pdf.createLoadingTask(this.fileUrl);loadingTask.promise.then((pdf) => {this.totalPages = pdf.numPages;console.log(this.totalPages)this.$nextTick(() => {this.setWatermarkContent();});}).catch((err) => {this.$message.warning("pdf加载失败");});},// 上一页prePage() {let page = this.pageNum;page = page > 1 ? page - 1 : this.totalPages;this.pageNum = page;window.scrollTo(0, 0);},// 下一页nextPage() {let page = this.pageNum;page = page < this.totalPages ? page + 1 : 1;this.pageNum = page;window.scrollTo(0, 0);},setWatermarkContent() {// 1.创建canvas容器,绘制水印let ele = document.createElement("canvas");//设置水印元素的宽高ele.width = 250;ele.height = 200;let str ="测试水印"let ctx = ele.getContext("2d");//绘制2d图形ctx.font = `${20}px ${"microsoft yahei"}` // 设置水印文字的大小和字体ctx.rotate((-25 * Math.PI) / 180);// 设置水印元素的倾斜, 这一行代码要写在设置水印文字之前，涉及样式的都写在设置水印文字之前ctx.fillStyle = "#dadbdc" // 设置水印文字的颜色ctx.textAlign = 'left'; // 文本左对齐ctx.fillText(str, ele.width / 6, ele.height / 2);// 设置水印文字// 2.将水印canvas遮罩层作为背景图，添加到div中let div = document.createElement("div");div.style.pointerEvents = "none";// 元素永远不会成为鼠标事件的targetdiv.style.top = "0";div.style.left = "0px";div.style.position = "fixed";// 固定定位, 让元素撑满整个可视区域div.style.background = "url(" + ele.toDataURL("image/png") + ") left top repeat";// 水印图片做div的背景,并且重复，这样看起来就是满屏都是水印let width = document.getElementById("pdfBox").clientWidth ; //设置div的宽高let height = document.getElementById("pdfBox").clientHeight;div.style.width = width + "px";div.style.height = height + "px";div.style.zIndex = 999999 // 水印元素的权值设得大一些，以此来遮盖所有的元素// 3.div添加到body元素，水印生成document.getElementById("myPdf").appendChild(div);},},};</script>

效果展示:

vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）相关推荐

咖啡汪日志——JAVA导出pdf文件加水印文字+图片、文字
咖啡汪日志--JAVA导出pdf文件加水印文字和图片.文字 hello,又大家见面了! 作为一只不是在戏精就是在戏精路上的哈士奇,今天要展示给大家的就是如何快捷地给pdf文件增加各种水印.嗷呜呜,前 ...
pdf文件加水印怎么加，5个方法快速易学
PDF文件加水印是一个非常重要且常见的操作,对于不熟悉这一技能的人来说可能会感到困难.这也是为什么在某些浏览器中"pdf文件加水印怎么加"搜索量可高达几百万之多.但是,我们都知道掌 ...
在vue中使用pdfjs-dist把pdf文件转为canvas
因为pdf存在分页的情况所以加了个目录,以下就是pdf转为canvas的最终成果下载pdfjs-dist(一定要下载2.2.228版本的) npm i pdfjs-dist@2.2.228 上代码 ...
如何使用python给PDF文件加水印
Python作为编程界最火的语言,能做的事几乎你能想到的它都能干,就连抢茅台都可以,还有什么不行?! Python作为脚本编程语言,可以做很多事情.使用Python,你可以轻松地给pdf加上水印. 你 ...
Vue中利用canvas添加炫动背景
1.展示页面 <template><div id="main"><canvas id="myCanvas" style=" ...
iText包对每页pdf文件加水印
https://ishare.iask.sina.com.cn/f/31zwqlKmIwM.html
PDF.js对打印、下载按钮做限制，pdf文件加水印
vue中使用Vue-i18n插件实现页面中英文切换详细教程
1.在项目的根目录中安装插件 npm install vue-i18n 2.新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹 zh.js为中文语言包 en.js为英文语言包文件夹与 ...
【web可视化】canvas画图学习详细教程笔记完整代码
canvas是什么 <canvas> 是HTML5中的标签一个容器,可以使用JS在其中绘制图形或文字. <canvas>是一个可以使用脚本 (通常为JavaScript) 来绘 ...

vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）

vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）相关推荐

最新文章

热门文章