其实我是不建议预览的时候在前端加水印，这种方式简直就是掩耳盗铃，但是在后端处理的成本比较大，服务器资源有限，有时候也要干点知道是蠢事的蠢事。
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);
}
//---------------------水印结束---------------------
修改之后大概是这个样子
修改之后可以访问试试
