利用PDFJS预览pdf文件并加水印

其实我是不建议预览的时候在前端加水印，这种方式简直就是掩耳盗铃，但是在后端处理的成本比较大，服务器资源有限，有时候也要干点知道是蠢事的蠢事。

pdfjs官网提供的下载包里有一个viewer.html这里,如果想偷懒可以直接套用这个，访问这个文件的时候加上file="xxxxx.pdf"，需要预览的路径就行了，这里不多说，主要是加水印，加水印理论上只需要修改viewer.js这个文件就行了，如果需要动态赋值水印内容，可以在viewer.html这个文件使用的head标签中引用viewer.js之前使用JavaScript赋值。

viewer.js需要改动的地方：

可以直接搜索

textLayerDiv.className = "textLayer";
textLayerDiv.style.width = canvasWrapper.style.width;
textLayerDiv.style.height = canvasWrapper.style.height;

可以定位到大概位置（不同版本语法可能不一样）
将上图红框中的代码替换成如下代码：

//---------------------水印开始---------------------
      var cover = document.createElement('div');
      cover.className = "cover";
      for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 4; x++) {
          let c = document.createElement('div')
          c.className = "cover"
          c.style.position = 'absolute';
          c.style.left = (10+x/4*100)+'%';
          c.style.top = (10+y/5*100)+'%';
          c.style.transform = "rotate(315deg)";
          c.style.color = "rgba(0, 191, 255, 0.2)";
          // c.innerText = text;//text为水印内容，可以在viewer.html中传入，也可以直接替换成固定的字符串如：c.innerText = "这是一个水印";
          c.innerText = "这是一个水印";
          cover.appendChild(c);
        }
      }
      if (this.annotationLayer?.div) {
        div.insertBefore(textLayerDiv, this.annotationLayer.div);
        div.appendChild(cover);
      } else {
        div.appendChild(textLayerDiv);
        div.appendChild(cover);
      }
      //---------------------水印结束---------------------

修改之后大概是这个样子

修改之后可以访问试试