vue使用pdf.js预览pdf文件加水印，下载pdf文件

项目背景：
vue-cli3脚手架
pdf.js版本为官方最新稳定版2.8.335
pdf.js下载地址：http://mozilla.github.io/pdf.js/getting_started/#download

根据自身需求去选择对应版本

开始使用

一、项目中放置pdf.js的包

在项目的public文件夹下，新建一个pdfjs文件夹，将下载下来的build和web文件夹丢进去，目录结构如下：

vue-cli3下public文件夹中的内容不参与打包，打包生成的index.html直接可以访问到，放在src文件夹下的js必须通过import或者require才能引入
如果放在src目录下，会报错：
Uncaught SyntaxError: Unexpected token '<'

二、项目中使用

pdf是放在一个dialog弹窗中的，点击按钮，显示弹窗，在弹窗中以iframe的形式嵌入pdfjs中的viewr.html
完整代码：

<template>
  <div id="container">
    <el-dialog
      title="用户手册"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :append-to-body="true"
      :before-close="handleClose"
    >
        <iframe
          style="width:100%;height:100%;"
          :src="pdfSrc"  
          ref="pdfViewr"
          allowfullscreen
          webkitallowfullscreen
        >
        </iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
    dialogVisible:{
      type:Boolean,
      default:false
    }
  },
  created(){
  },
  data() {
    return{
    //webpack在查找文件时，对于找不到的文件，会去public文件夹中查找，
    //前面如果不写成./ 打包后会报错
    //这里后端返回的是浏览器直接可以访问的在线地址，不是文件流形式
      pdfSrc:"./pdfjs/web/viewer.html?file=后端返给你的pdf地址",

    }
  },
  methods:{
    handleClose(){
      this.$emit("closePdf")
    }
  }
}
</script>

<style lang="scss">
  .is-fullscreen{
    .el-dialog__body{
      height:calc(100% - 53px);
    }
  }
</style>

注意：

此时已经完成一半了，打开弹窗viewr.js会抛出跨域错误，
"file origin does not match viewer's"
需要去下载下来的web文件夹下的viewer.js中修改一下源码：

我选择直接注释掉这个函数

在viewr.js中直接搜索 validateFileURL, 注释掉就好了。

此时，我们的pdf就可以正常出来了

像这样，可以进行下载 打印 等一系列操作

预览加水印

需求是，要用户名 + 打开的时间水印
注意：
下载下来的pdf文件是不带水印的，如果要下载带水印的pdf只能加个下载按钮，点击时让后端返回带水印的文件，前端执行下载操作

预览加水印同样是去修改viewer.js文件
添加的代码如下：

在viewer.js中找到textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE, this.eventBus);
这一句，把下面的代码，加在它前面就好了

//给文件添加水印
      var cover = document.createElement('div');
        cover.className = "cover"
        function formateTime(){
            const time = new Date();
            const year = time.getFullYear();
            const month = time.getMonth() + 1;
            const day = time.getDate();
            const hour = time.getHours();
            const minute = time.getMinutes();
            return year+"/"+month+"/"+day+" "+hour+":"+minute
        }
        let watermark_txt;   //这个是根据需求加的用户名+时间，可以自己改
        if(localStorage.name){
          watermark_txt = localStorage.name + '-' + formateTime();
        }else{
          watermark_txt = `用户${formateTime()}`
        }
        var defaultSettings = {
          //watermark_txt: window.parent.waterMark,
          // watermark_img: "",
          watermark_txt,
          watermark_x: 0,//水印起始位置x轴坐标
          watermark_y: 0,//水印起始位置Y轴坐标
          watermark_rows: 16,//水印行数
          watermark_cols: 16,//水印列数
          watermark_x_space: 100,//水印x轴间隔
          watermark_y_space: 100,//水印y轴间隔
          watermark_color: 'red',//水印字体颜色
          watermark_alpha: .3,//水印透明度
          watermark_fontsize: 12,//水印字体大小
          watermark_font: '微软雅黑',//水印字体
          watermark_width: 140,//水印宽度
          watermark_height: 60,//水印长度
          watermark_angle: 30,//水印倾斜度数***       
        };
        var oTemp = document.createDocumentFragment();
        //获取页面最大宽度
        var page_width = parseInt(canvasWrapper.style.width);
        //获取页面最大长度
        var page_height = parseInt(canvasWrapper.style.height);
        //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
        if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
          defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
          defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
        }
        //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
        if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
          defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
          defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
        }
        var x;
        var y;
        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
          y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
          for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

            var mask_div = document.createElement('div');
            var mask_img = document.createElement('img');
            mask_div.id = 'mask_div' + i + j;
            mask_div.className = 'mask_div';
              mask_img.className = 'mask_img';
            mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
            mask_img.src = defaultSettings.watermark_img;
            //设置水印div倾斜显示
              if(defaultSettings.watermark_img == "" || !defaultSettings.watermark_img){
                  mask_div.remove(mask_img);
              }else{
                  mask_div.append(mask_img);
              }   //注意看这里加了图片水印
            mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.visibility = "";
            mask_div.style.position = "absolute";
            //奇偶行错开，这样水印就不对齐，显的不呆板
            if (i % 2 != 0) {
              mask_div.style.left = x + 100 + 'px';
            } else {
              mask_div.style.left = x + 'px';
            }
            mask_div.style.top = y + 'px';
            mask_div.style.overflow = "hidden";
            mask_div.style.opacity = defaultSettings.watermark_alpha;
            mask_div.style.fontSize = defaultSettings.watermark_fontsize;
            mask_div.style.fontFamily = defaultSettings.watermark_font;
            mask_div.style.color = defaultSettings.watermark_color;
            mask_div.style.textAlign = "center";
            mask_div.style.width = defaultSettings.watermark_width + 'px';
            mask_div.style.height = defaultSettings.watermark_width + 'px';
            mask_img.style.width = defaultSettings.watermark_width + 'px';
            mask_img.style.height = defaultSettings.watermark_height + 'px';    //这里可以控制水印大小
            // mask_div.style.zIndex = '-99';
            mask_div.style.display = "block";
            oTemp.appendChild(mask_div);
          }
        }
        cover.appendChild(oTemp);
        //这里结束
        if (this.annotationLayer && this.annotationLayer.div) {
          div.insertBefore(textLayerDiv, this.annotationLayer.div);
          //水印
          div.appendChild(cover);
        } else {
          div.appendChild(textLayerDiv);
          //水印
          div.appendChild(cover);
        }

      if (this.annotationLayer?.div) {
        div.insertBefore(textLayerDiv, this.annotationLayer.div);
      } else {
        div.appendChild(textLayerDiv);
      }
      //水印
       var cover = document.getElementsByClassName('cover');
        for (var i = 0, len = cover.length; i < len; i++) {
          cover[i].style.width = canvasWrapper.style.width;
          cover[i].style.height = canvasWrapper.style.height;
        }
      //加水印结束
		
	//在viewer.js文件中找到这一行，把上面的代码都加进去水印就出来啦
      textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE, this.eventBus);