使用pdf.js预览pdf,隐藏下载功能,注释ctrl+s下载功能

第一次写博客,因为浏览器自带的预览pdf功能无法隐藏下载按钮,所以使用pdf.js来代替。

使用pdf.js步骤
1.在官网下载pdf.js并解压(地址:PDF.js )
在这里插入图片描述

在这里插入图片描述

选择稳定版下载,下载之后在项目的资源目录下创建一个文件夹,压缩文件解压到项目的资源目录下

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
2.如何预览pdf
使用pdf.js预览pdf是很简单的,链接web目录下的viewer.html页面,将pdf文件地址当作fileId的属性。因为我需要访问服务器上的pdf文件,所以此处使用的是已经编码后的网络路径,带有特殊字符(比如’=’),所以需要使用encodeURIComponent函数对其进行编码,pdf.js会自动对其进行解码,不需要我们后台解码。代码如下:
在这里插入图片描述

3.隐藏下载功能
最简单的办法就是隐藏下载按钮,找到viewer.html里的打印,下载按钮,给其加上display:none属性。这个办法有一个隐患就是打开f12把属性去掉,按钮就又能被看到。
在这里插入图片描述

解决这个问题就是找到pdf/web/viewer.js,注释掉其中两行。(不同版本所在行数可能不同,根据行数找不到时请根据内容搜索)
在这里插入图片描述

解决了下载按钮之后,我发现鼠标焦点在iframe里时 使用ctrl+s也能下载文件。解决这个问题同样也是找到pdf/web/viewer.js,注释下载代码就ok了。(不同版本所在行数可能不同,根据行数找不到时请根据内容搜索)
在这里插入图片描述

这样用户就无法下载pdf文件了,我们的目的就达到了。

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
PDF.js是一个用于在Web浏览器中呈现PDF文件的开源JavaScript库。尽管PDF.js本身并没有内置的批注功能,但你可以基于PDF.js构建自定义的批注功能。根据引用[2]和引用提供的信息,你可以通过以下步骤来实现PDF.js的批注功能: 1. 首先,确保你已经在你的Web应用程序中正确地集成了PDF.js库。你可以从官方网站https://mozilla.github.io/pdf.js/获取最新版本的PDF.js,并按照官方文档中的说明进行集成。 2. 创建一个注释器,该注释器基于PDF.js库。这个注释器可以是一个自定义的JavaScript类或模块,用于处理批注的创建、编辑和显示。 3. 在你的注释器中,实现添加批注的功能。根据引用中提供的截图,你可以使用普通的JavaScript代码来创建各种类型的批注,如箭头、自由手绘、自由文本、文本选择高亮/下划线/穿透、测量、圆圈和戳记。你需要使用PDF.js提供的API和Canvas元素来在PDF页面上绘制和显示这些批注。 4. 另外,你可能还需要实现保存批注的功能。这样用户可以保存他们添加的批注,以便在以后重新加载时查看或编辑。你可以根据你的需求选择合适的方法来保存批注数据,如将批注数据保存在服务器端或使用本地存储技术(如LocalStorage或IndexedDB)。 总结起来,要在PDF.js中实现批注功能,你需要集成PDF.js库到你的Web应用程序中,并基于PDF.js构建自定义的注释器来实现批注的创建、编辑和显示。你可以使用普通的JavaScript代码和Canvas元素来绘制和显示各种类型的批注。此外,你可能还需要实现保存批注的功能,以便用户可以保存和加载他们添加的批注。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值