预览PDF文件，新开浏览器窗口或者打开弹窗，如何禁用掉自带的下载等功能。

已于 2023-08-30 11:10:12 修改
阅读量2.4k 收藏 13
点赞数 9
分类专栏： JavaScript 文章标签： html5 vue.js
于 2023-08-30 11:08:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/champion_ooO/article/details/132578467
版权
本文介绍如何在后端返回PDF文件时，通过添加特定参数如#toolbar=0&navpanes=0&scrollbar=0来避免显示多余的功能菜单，仅显示文件内容。

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

当后端返回一个PDF文件支持预览时，直接打开路径，会带上一些功能菜单。

但是这个地方不需要这些功能，只需要展示文件即可。

如何去掉功能菜单？只需要在路径后面继续添加以下参数即可：#toolbar=0&navpanes=0&scrollbar=0

效果如下：

统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
浏览器在线PDF预览取消下载按钮
孙叫兽的博客
05-25 5794
业务场景：需要在线PDF下载的功能，刚开始用的是第三方的PDF.JS，按照网上的方法操作，排查，发现没有作用，经过和后端小伙伴沟通，原来这个地址是浏览器PDF预览。 目录 浏览器PDF取消办法： 在需要URL地址后边加上代码 PDF.JS取消下载的办法： 浏览器PDF取消办法： 在需要URL地址后边加上代码 '#toolbar=0' 加了代码： 或者 修改完看下效果： 上面的整行黑条都没了 打工告成！ 顺便说一下 PDF.JS取消下载的办法： vi...
PDF在线预览插件屏蔽打印 下载操作
08-23
PDF在线预览插件屏蔽下载与屏蔽打印功能,进行源代码的修改，杜绝非法用户进行PDF文件的下载与盗取操作。可以进行文件流实现PDF在线预览。 针对当前盖章签名的pdf 可以进行正常预览。 pdf.worker.js viewer.js 进行修改 并且进行重新编译。
使用pdf.js预览pdf，隐藏下载功能，注释ctrl+s下载功能
jayquartus的博客
07-18 7770
第一次写博客，因为浏览器自带的预览pdf功能无法隐藏下载按钮，所以使用pdf.js来代替。 使用pdf.js步骤 1.在官网下载pdf.js并解压（地址：PDF.js ） 选择稳定版下载，下载之后在项目的资源目录下创建一个文件夹，压缩文件解压到项目的资源目录下 2.如何预览pdf 使用pdf.js预览pdf是很简单的，链接web目录下的viewer.html页面，将pdf文件地址当作f...
浏览器打开pdf，禁止下载打印
Autowired的博客
04-27 1万+
之前在网站上打开pdf文件，都是用浏览器查看pdf时自带的功能，可以下载打印，最近要求打开pdf后仅供用户预览，禁止下载打印。网上查了一下，发现有很多前辈都遇到过，解决方法是用pdf.js。 1.下载 官网提供了一个demo，稍微改一下就可以用了，真的超棒。pdf.js下载 2.修改 将下载的插件包拷贝到自己的项目中，我是放在了WebRoot下。打开web下的viewer.js将默认的路径置为“”...
js禁用浏览器 pdf 打印、下载功能（pdf.js 禁用打印下载、功能）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
06-22 1万+
js禁用浏览器 pdf 打印、下载功能（pdf.js 禁用打印下载、功能）
打开PDF去除下载按钮（pdf.js）
墨 尘
12-09 8459
最近在做一个打开pdf只要预览不要下载的功能，浏览器打开的话会有一个下载按钮，但是我不想要这个按钮，找了好久没找到去掉这个按钮的方法，最后我选择了用pdf.js。 其实pdf.js用起来还是挺简单的： 链接: https://pan.baidu.com/s/1itCT9_AK2HBPNxIC9fvV5w 提取码: ymtk 下载后解压，然后放到web工程里面 首先打开web目录下的view...
在HTML或React中实现PDF文件预览，想要不允许下载等如何设置呢？
hongweilin2021的博客
10-30 8626
在HTML或React中实现PDF文件预览且要隐藏下载等按钮，得使用pdf.js框架方案，诸如iframe等HTML标签方式都不行。
通过pdfjs实现在VUE-CLI中进行PDF预览，并禁用打印及下载功能
qq_24800489的博客
06-02 6060
官网：PDF.js官方demo：PDF.js viewer下载本文主要针对vue-cli4版本的文件 因为pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误，所以需要把viewer.js文件内的抛出错误这一行报错注释掉 既然是新框架，肯定想先玩玩试试效果，很简单，页面放一个iframe，然后src等于到viewer.html的public路径，直接（pdfjs/***）即可。 效果就跟 官方
后端返回的PDF文件，前端如何新开一个窗口打开预览，不能直接下载
qq_42267338的博客
05-10 511
话不多说，直接上代码。
基于Chrome扩展的浏览器可信事件与网页离线PDF导出
WindRunnerMax
07-02 1467
Chrome扩展是一种可以在浏览器中添加新功能和修改浏览器行为的软件程序，我们可以基于Manifest规范的API实现对于浏览器和Web页面在一定程度上的修改，例如广告拦截、代理控制等。则是Chrome浏览器提供的一套与浏览器进行交互的API，我们可以基于DevTools协议控制Chromium内核的浏览器进行各种操作，例如操作页面元素、模拟用户交互等。
Selenium学习（四）----Selenium+Java关闭windows预览弹出窗口
不学习，永远发现不了自己的潜力
08-26 1543
前提条件：在页面右击选择预览文件后弹出Windows窗口展示图片。但是如何关掉，继续其他操作呢？解答如下： package 包名; //引入的各种包 import java.util.ArrayList; import java.util.Set; public class source{ public static void main(String[] args) throws I...
js逻辑_浏览器打印window.print
qq_43260366的博客
03-27 2556
也就是说，若是我们想打印某部分数据，需要先准备一个盒子，等待打印时，将这个盒子的内容赋值给document进行打印。以下是打开百度页面 在控制台调用 window.print 方法 后弹出的弹框 ，在右侧可以选择。，若是单元格内容是文本则会自动换行，但是若是数字则会覆盖另一单元格的文本，因此需要设置强制换行。如上示例中，在设置一列时给每一列设置了宽度，但是若是宽度超过总宽度则会对每列宽度进行。需要注意的是： 页眉和页脚是 在打印时自带的，当需要打印的数据是表格是，建议使用。因为组件样式在打印时可能不显示！
在默认 PDF 查看器的 iframe 中禁用/隐藏下载按钮
weixin_46783311的博客
12-07 2629
试了好多方法，这个可以“在 src 中的 .pdf 文件名后使用#toolbar=0”在默认 PDF 查看器的 iframe 中禁用/隐藏下载按钮。
PDFJS实现PDF预览，隐藏禁用下载打印
最新发布
需要远程指导仿真实验、代码有问题的，请后台私信或者关注公众号
11-20 1090
PDFJS实现PDF预览，隐藏禁用下载打印
浏览器在线预览pdf，隐藏右上角的下载按钮
一个还不成熟、正在努力成长的博客小站。
12-24 7233
在你的需要演示的URL地址后边加上代码 '#toolbar=0' 上边黑的一条工具栏就会隐藏掉。 没有加代码之前，可以直接下载，功能权限控制不了下载按钮， 加完代码以后 这一条就没有了。！！！ ...
如何让pdf只能预览不能下载
weixin_45897870的博客
08-16 2934
现在有个需求，只让pdf预览不让下载打印，研究了下pdfjs，views.html后面拼上的file=xxx路径，就是直接暴露在路径中的，，，直接打开即使隐藏了下载打印按钮也没用。就算是不暴露路径，用iframe标签，F12打开也能看到下载的文件。
解决网页版PDF只能浏览不可下载的一种方法
weixin_46207424的博客
10-18 3815
步骤3：找到PDF结尾的文件，若没有，双击弹出的几个文件，找到其中的PDF即可直接下载。网上找了一篇PDF格式的专利文献，如何下载？步骤1：F12打开开发者模式。步骤2：选择Network。
Vue实现pdf下载后弹窗预览
05-25
要实现这个功能，我们需要用到以下两个库： 1. `pdfjs-dist`：用于解析 PDF 文件并将其转换为可供浏览器渲染的 HTML。 2. `vue-pdf`：一个 Vue 组件，用于在页面上呈现 PDF 文件。 下面是具体的实现步骤： 1. 安装依赖： ``` npm install pdfjs-dist vue-pdf --save ``` 2. 在 Vue 组件中引入所需的库： ```javascript import pdfjsLib from 'pdfjs-dist/webpack'; import VuePdf from 'vue-pdf'; ``` 3. 定义一个方法，用于下载 PDF 文件： ```javascript downloadPdf() { const url = 'your_pdf_url'; axios.get(url, { responseType: 'blob' }).then(response => { const blob = new Blob([response.data], { type: 'application/pdf' }); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'your_pdf_name'; link.click(); }); } ``` 4. 在组件中使用 `vue-pdf` 组件： ```html <template> <div> <button @click="downloadPdf">下载 PDF</button> <vue-pdf :src="pdfSrc" :show-toolbar="true"></vue-pdf> </div> </template> <script> import pdfjsLib from 'pdfjs-dist/webpack'; import VuePdf from 'vue-pdf'; export default { components: { VuePdf }, data() { return { pdfSrc: '' }; }, methods: { downloadPdf() { // 下载 PDF 文件的代码 } }, mounted() { const url = 'your_pdf_url'; pdfjsLib.getDocument(url).promise.then(pdf => { this.pdfSrc = pdf; }); } }; </script> ``` 这样，当用户点击下载按钮时，会下载 PDF 文件并以弹窗的形式呈现在页面上。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值