web project and add watermark to prohibit the introduction of PDF.js download

Directory
web project and add watermark to prohibit the introduction of PDF.js download

1. Download and introduced PDF.js preview
2. Dynamic preview PDF file
3. Hidden open, download, print and other functions
4. Prohibition keyboard combination or Save As button download
5. Disabling mouse
6. Adding Global watermark
7. PDF file preview

web project and add watermark to prohibit the introduction of PDF.js download

SSH introduced PDF.js common project for online preview PDF file

1. Download and introduced PDF.js preview
2. Download the official website address: https: //mozilla.github.io/pdf.js, after the download is complete archive decompression; here I downloaded pdfjs-2.2.228-dist
3. Will create a pdfjs-dist directory under WebRoot / script directory, copy the file after extracting this directory (only copy subdirectories under pdfjs-dist can file in the root directory not be reproduced here)
4. To test copy comes when pdfjs download pdf preview file compressed.tracemonkey-pldi-09.pdf to WebRoot directory
5. Run the web project, preview the file in a Web page, PDF can be displayed properly, such as tips can not be loaded pdf.worker.js files, can be found in the following snippet to be modified in /web/viewer.js file:

workerSrc: {
    value: '../build/pdf.worker.js',
    kind: OptionKind.WORKER
}

改为如下内容：

workerSrc: {
    value: '/script/pdfjs-dist/build/pdf.worker.js',
    kind: OptionKind.WORKER
}

6. Preview successfully the following screen appears
   
7. Dynamic preview PDF file

The above steps are only realized the preview PDF file, PDF file below start configuring dynamic preview of the project

1. PdfView WebRoot directory created in the directory (PDF preview service directory, as a jump in view of the final path Struts2), copy the file viewer.html pdfjs-dist directory under this directory, the suffix to jsp, to facilitate later different dynamic preview PDF file
2. Achieve different preview PDF, the PDF file is loaded only need to modify the path, add the following code in the head tag viewer.jsp:

<script type="text/javascript">
   var productFilePath = "file=${filePath}";//后台Action传入前台的pdf文件路径参数赋值给url
</script>

3. Then find the location functiion webViewerInitialized function in viewer.js in:

var file;
var queryString = document.location.search.substring(1);//修改这行的内容
var params = (0, _ui_utils.parseQueryString)(queryString);
file = 'file' in params ? params.file : _app_options.AppOptions.get('defaultUrl');
validateFileURL(file);

这里的queryString即从url中读取file参数来设置文件路径，将这行进行修改：

var queryString = productFilePath;

4. Re-preview, you can preview the file according to different requirements of different reception preview link
5. Hidden open, download, print and other functions
6. Hide function is relatively simple, requiring only modify viewer.jsp the button is displayed can be so hidden at the open, download and print a few buttons

Id found in the div # toolbarViewerRight were openFile, print, download and other button, add visibleMediumView to hide, in effect following class attribute:

2. To hide the mouse to select, view document information can be found in the div # secondaryToolbarButtonContainer id respectively cursorSelectTool, documentProperties, you can add visibleMediumView in the class attribute:

<button id="documentProperties" class="secondaryToolbarButton documentProperties visibleMediumView" title="Document Properties…" tabindex="68" data-l10n-id="document_properties">
   <span data-l10n-id="document_properties_label">Document Properties…</span>
</button>

4 disable the keypad keys downloaded or saved as a combination
locate the keyboard key combination 1. Print:

var hasAttachEvent = !!document.attachEvent;
window.addEventListener('keydown', function (event) {
  if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
    window.print();

    if (hasAttachEvent) {
      return;
    }

    event.preventDefault();

    if (event.stopImmediatePropagation) {
      event.stopImmediatePropagation();
    } else {
      event.stopPropagation();
    }

    return;
  }
}, true);

2. replaced by the following:

var hasAttachEvent = !!document.attachEvent;
window.addEventListener('keydown', function (event) {
  if ((event.keyCode === 80 || event.keyCode === 83) && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
    //window.print();

    if (hasAttachEvent) {
      return;
    }

    event.preventDefault();

    if (event.stopImmediatePropagation) {
      event.stopImmediatePropagation();
    } else {
      event.stopPropagation();
    }

    return;
  }
}, false);

Refresh the page, then try Ctrrl + P to print or save Ctrl + S description reference has no effect
5. Disable mouse
disable the mouse to select, the right mouse button and the like, modify viewer.jsp body tag, add attributes to the following:

<body tabindex="1" class="loadingInProgress"
        tabindex="1" class="loadingInProgress"
        oncontextmenu="return false;" leftMargin="0" topMargin="0"
        oncopy="return false;" oncut="return false;"
        onselectstart="return false">

6. Adding Global watermark

Use canvas to add a global watermark, in fact traverse the document element node in viewer.js the same time, create a watermark element node and inserted into the position of each page. Original Reference

1 found the following in viewer.js, the location probably around 11,973 lines:

if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {
   var textLayerDiv = document.createElement('div');
   textLayerDiv.className = 'textLayer';
   textLayerDiv.style.width = canvasWrapper.style.width;
   textLayerDiv.style.height = canvasWrapper.style.height;
   //---这里就是要插入水印的位置---
   if (this.annotationLayer && this.annotationLayer.div) {
      div.insertBefore(textLayerDiv, this.annotationLayer.div);
   } else {
      div.appendChild(textLayerDiv);
   }
   textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
}

2. After inserting a watermark code is as follows:

if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {
    var textLayerDiv = document.createElement('div');
    textLayerDiv.className = 'textLayer';
    textLayerDiv.style.width = canvasWrapper.style.width;
    textLayerDiv.style.height = canvasWrapper.style.height;
    //---------------------水印开始---------------------
    var cover = document.createElement('div');
    cover.className = "cover";
    cover.innerText = "内容保密，请勿复制或下载"; //这里就是水印内容，如果要按照不同的文件显示不同的水印，可参考pdf文件路径的传值方式，在viewer.jsp中head部位接收后台传值并在这里使用
    if (this.annotationLayer) {
        // annotationLayer needs to stay on top
        div.insertBefore(textLayerDiv, this.annotationLayer.div);
        div.appendChild(cover);
    } else {
        div.appendChild(textLayerDiv);
        div.appendChild(cover);
    }
    var coverEle = document.getElementsByClassName('cover'),size = 0,
        nowWidth = +canvasWrapper.style.width.split("p")[0],
        //714为100%时，每页的宽度。对比当前的宽度可以计算出页面变化后字体的数值
        size = 50 * nowWidth / 714 + "px";
    for(var i=0, len=coverEle.length; i<len; i++){
        coverEle[i].style.fontSize = size;
        coverEle[i].style.width = canvasWrapper.style.width;
        coverEle[i].style.height = canvasWrapper.style.height / 10;
    }
    //---------------------水印结束---------------------
    if (this.annotationLayer && this.annotationLayer.div) {
        div.insertBefore(textLayerDiv, this.annotationLayer.div);
    } else {
        div.appendChild(textLayerDiv);
    }

    textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
}

3 Finally, add a watermark in viewer.css beginning of the file css style show complete Watermark:

/* 水印遮罩层 */
.cover{
  z-index: 100;
  position: absolute;
  top: 41%;
  left: 1%;
  transform: rotate(330deg);
  text-align: center;
  font-size: 310%;
  padding-left: 30px;
  letter-spacing: 18px;
  color:rgba(162, 162, 162, 0.4);
}

6 PDF file preview