web项目引入PDF.js并添加水印禁止下载

目录
web项目引入PDF.js并添加水印禁止下载

  1. 下载并引入PDF.js实现预览
  2. 动态预览PDF文件
  3. 隐藏打开、下载、打印等功能
  4. 禁止键盘组合按键下载或另存为
  5. 禁用鼠标操作
  6. 添加全局水印
  7. PDF文件预览效果

web项目引入PDF.js并添加水印禁止下载

普通SSH项目引入PDF.js实现在线预览PDF文件

  1. 下载并引入PDF.js实现预览
  2. 官网下载地址:https://mozilla.github.io/pdf.js,下载完成后将压缩包解压;这里我下载的是pdfjs-2.2.228-dist
  3. 将在WebRoot/script目录下创建一个pdfjs-dist目录,将解压后的文件复制到此目录下(仅复制pdfjs-dist下的子目录即可,根目录下的文件这里未进行复制)
  4. 将pdfjs下载时自带的pdf预览文件compressed.tracemonkey-pldi-09.pdf复制到WebRoot目录下用以测试
  5. 运行web项目,在网页中预览该文件,PDF可正常显示,如提示无法加载pdf.worker.js文件,可在/web/viewer.js文件中找到如下片段进行修改:
workerSrc: {
    value: '../build/pdf.worker.js',
    kind: OptionKind.WORKER
}

改为如下内容:

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

  1. 预览成功即出现以下界面
    在这里插入图片描述
  2. 动态预览PDF文件

以上步骤只是实现了PDF文件的预览,下面开始配置动态预览项目中的PDF文件

  1. 在WebRoot目录下创建pdfView目录(PDF预览的业务目录,用作最后Struts2的跳转视图路径),将pdfjs-dist目录下的viewer.html文件复制到此目录下,将后缀改为jsp,便于后面动态预览不同的PDF文件
  2. 实现预览不同的PDF,只需要将PDF文件加载路径修改即可,在viewer.jsp的head标签内中加入如下代码:
<script type="text/javascript">
   var productFilePath = "file=${filePath}";//后台Action传入前台的pdf文件路径参数赋值给url
</script>

  1. 然后在viewer.js中找到functiion webViewerInitialized函数的位置:
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;

  1. 重新预览,即可根据前台不同的预览链接实现不同文件的预览要求
  2. 隐藏打开、下载、打印等功能
  3. 隐藏功能比较简单,仅需修改viewer.jsp中的按钮是否显示即可,如此处隐藏打开、下载、打印几个按钮

在div#toolbarViewerRight下找到id分别为openFile、print、download等button,在class属性中添加visibleMediumView即可隐藏,效果如下:
在这里插入图片描述
2. 如需隐藏鼠标选择、查看文档信息,可在div#secondaryToolbarButtonContainer下找到id分别为cursorSelectTool、documentProperties,在class属性中添加visibleMediumView即可:

<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 禁止键盘组合按键下载或另存为
1.找到键盘组合按键打印的位置:

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.改为如下内容:

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);

重新刷新网页,此时尝试通过Ctrrl+P打印或Ctrl+S另存已经不会起作用 原文参考
5. 禁用鼠标操作
禁用鼠标选择、鼠标右键等操作,修改viewer.jsp的body标签,添加属性改为如下内容:

<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">

  1. 添加全局水印

利用canvas添加全局水印,其实就是在viewer.js中遍历文件元素节点的同时,创建水印元素节点并插入到每一页的位置。原文参考

1 在viewer.js中找到如下内容,位置大概在11973行前后:

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.插入水印代码后内容如下:

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 最后在viewer.css文件开始位置添加水印的css样式完成水印显示:

/* 水印遮罩层 */
.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文件预览效果
在这里插入图片描述

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值