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

本文介绍了如何使用pdf.js替代浏览器默认预览功能,以隐藏下载按钮。首先从PDF.js官网下载稳定版,解压并放入项目资源目录。然后通过链接viewer.html并传入PDF文件URL来预览。为隐藏下载功能,需修改viewer.html中下载按钮的样式,并注释掉viewer.js中与下载相关的代码,防止用户通过F12开发者工具恢复下载选项。同时处理了Ctrl+S保存为PDF的问题,确保用户无法下载PDF文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一次写博客,因为浏览器自带的预览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文件了,我们的目的就达到了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值