iframe方式预览pdf文件并添加水印

最近公司有预览pdf并增加水印的需求，现在把相关代码分享出来和大家分享共同进步。

1，下载pdf.js，我目前用的pdfjs是很久之前下载的，现在我找了几个下载地址，最终都不能下载成功，我会把代码上传到git上面，供大家下载；

2，我的项目是pc端和移动端都有pdf增加水印，且不能下载。移动端使用vue进行开发的，我就以vue为例进行介绍；

3，下载的pdfjs文件夹放到static目录下，新建一个页面，通过iframe方式引用，使用pdfjs自带的viewer.html预览pdf。

5，执行以上代码有报错，打开viewer.js，搜索“viewerOrigin”关键字，注释下面代码即可

 

6，添加水印，打开viewer.js文件，找到10094行左右，此处添加水印代码

水印代码：

   //开始水印
          var cover = document.createElement('div');
          cover.className = "cover";
          let pdfWidth= canvasWrapper.style.width
          let pdfHeight= canvasWrapper.style.height
          var defaultSettings = {
              watermark_txt: window.parent.waterMarkText||'默认水印',
              watermark_rows: 2,//水印每行几列
              watermark_cols: 3,//水印每页几行
              watermark_color: '#000',//水印字体颜色
              watermark_alpha: 0.5,//水印透明度
              watermark_fontsize: '28px',//水印字体大小
              watermark_font: '宋体',//水印字体
              watermark_angle: 20//水印倾斜度数
          };
          var oTemp = document.createDocumentFragment();
          //获取页面最大宽度
          let page_width = Math.max(
              document.body.scrollWidth,
              document.body.clientWidth
          );
          let x;
          let y;
          for (let i = 0; i < defaultSettings.watermark_rows; i++) {
              y =pdfHeight.split('px')[0]/defaultSettings.watermark_cols;
              x =pdfWidth.split('px')[0]/defaultSettings.watermark_rows;
              for (let j = 0; j < defaultSettings.watermark_cols; j++) {
                  let mask_div = document.createElement("div");
                  mask_div.id = "mask_div" + i + j;
                  mask_div.setAttribute("class", "mask_div");
                  mask_div.appendChild(
                      document.createTextNode(defaultSettings.watermark_txt)
                  );
                  //设置水印div倾斜显示
                  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";
                  mask_div.style.left = x*i + "px";
                  let top;
                  if(j==0){
                    top = y*j+50;
                  }else if(j+1==defaultSettings.watermark_cols){
                    top = y* j -50;
                  }else{
                    top = y*j;
                  }
                  mask_div.style.top = top + "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 = x + 'px';
                  mask_div.style.height = y + 'px';
                  mask_div.style.display = "block";
                  mask_div.style.fontWeight="bold";
                  mask_div.style.lineHeight =
                      y + "px";
                  oTemp.appendChild(mask_div);
              }
          }
          cover.appendChild(oTemp);
        //  结束水印

将水印添加到页面中

7，隐藏打印和下载按钮--打开viewer.html文件，找到下面两个button按钮，class加上“visibleMediumView”样式即可。

 

git地址：https://github.com/chengyy0802/cyy-pdfjs.git