pdf添加水印

一、vue-pdf

在项目开发过程中，如果我们只需要展示pdf，那么我们可以选择vue-pdf，可以查看我之前的一篇

但是现在的需求是需要显示带水印的pdf出来，这就存在一个问题，vue-pdf会屏蔽签名图层，导致显示不出来水印。

解决方案一：

我在issues上看到有人提出了这个问题。issues地址

解决方案是直接修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN：

// if (data.fieldType === 'Sig') {
//注释这一行
//   _this2.setFlags(_util.AnnotationFlag.HIDDEN);
// }

解决方案二：

由于方案一并不能解决我的问题，于是我又找了一下，解决方案

打开 node_modules\vue-pdf\src\pdfjsWrapper.js
 
把这行注释掉 annotationLayerElt.style.visibility = 'hidden'

由于这两种方案都没有达到期望的效果，所以我换了一个插件。

二、pdfh5

安装：

npm install pdfh5

使用:

<template>
  <div id="app">
	<div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App',
	data() {
	  return {
	    pdfh5: null
	  };
	},
	mounted() {
		//实例化
	  this.pdfh5 = new Pdfh5("#demo", {
		pdfurl: "../../static/test.pdf"
	  });
	  //监听完成事件
	  this.pdfh5.on("complete", function (status, msg, time) {
		console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
	  })
	}
  }
</script>

<style>
	@import "pdfh5/css/pdfh5.css";
</style>

引入：

如果css引用报错的话，按下面的方式引用。

//引入pdfh5
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

效果：

这样就可以显示出来具体的水印了，水印.jpg

参考链接1——pdfh5（侵删）
参考链接2——电子签章不显示（侵删）
参考链接3——电子签章不显示（侵删）