小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动
一、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
