首页
前端开发
HTML5
PDF.js禁用复制与下载显示功能

PDF.js禁用复制与下载显示功能

0 次浏览 0 条评论
zip
zip

PDF 加载的内容复制和下载限制，说起来简单，做起来还是有点门道的。PDF.js就是个不错的工具，开源、跨平台，还不需要插件。你只要在页面里引一下库，就能直接在浏览器里渲染 PDF 了，响应也挺快。

用PDF.js加载 PDF 挺简单，核心就是调用PDFJS.getDocument去拿文档，拿到页面对象做展示。但你要想加点“防护措施”，比如禁掉复制和右键，得自己扩展一下。

我试过的办法是，自定义个PDFViewer，重写它的handleEvent方法。只要用户点右键或者试图复制，就拦下来，像这样：

class CustomPDFViewer extends PDFViewer {
  constructor(options) {
    super(options);
    this.container.classList.add('custom-pdf-viewer');
  }


handleEvent(event) {
    if (event.type === 'contextmenu') {
      event.preventDefault();
    }
  }
}
PDFViewerApplicationOptions.set('viewer', CustomPDFViewer);

啦，这种方式只是防君子不防小人。真要彻底禁止下载，还得从服务端下手，比如加个Content-Disposition: inline的响应头，能稍微限制一下下载行为。

还有一点要注意：PDF 文件必须是服务器上的路径，别拿本地file://地址试，它加载不了。

如果你刚好手上有个文件叫js 加载 pdf 禁掉复制下载显示，那率是个完整的示例项目，结合上面这些做法一起用会更方便。需要更深入的案例？下面这些链接你可以看看：

如果你也有类似需求，不妨试试看这种方式，灵活、兼容还挺省事的。

zip 文件大小：403.64KB