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

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

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

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

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

效果如下：

champion_ooO
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
浏览器在线PDF预览取消下载按钮
孙叫兽的博客
05-25 5228
业务场景：需要在线PDF下载的功能，刚开始用的是第三方的PDF.JS，按照网上的方法操作，排查，发现没有作用，经过和后端小伙伴沟通，原来这个地址是浏览器PDF预览。 目录 浏览器PDF取消办法： 在需要URL地址后边加上代码 PDF.JS取消下载的办法： 浏览器PDF取消办法： 在需要URL地址后边加上代码 '#toolbar=0' 加了代码： 或者 修改完看下效果： 上面的整行黑条都没了 打工告成！ 顺便说一下 PDF.JS取消下载的办法： vi...
使用pdf.js预览pdf，隐藏下载功能，注释ctrl+s下载功能
jayquartus的博客
07-18 7293
第一次写博客，因为浏览器自带的预览pdf功能无法隐藏下载按钮，所以使用pdf.js来代替。 使用pdf.js步骤 1.在官网下载pdf.js并解压（地址：PDF.js ） 选择稳定版下载，下载之后在项目的资源目录下创建一个文件夹，压缩文件解压到项目的资源目录下 2.如何预览pdf 使用pdf.js预览pdf是很简单的，链接web目录下的viewer.html页面，将pdf文件地址当作f...
在默认 PDF 查看器的 iframe 中禁用/隐藏下载按钮
最新发布
weixin_46783311的博客
12-07 1359
试了好多方法，这个可以“在 src 中的 .pdf 文件名后使用#toolbar=0”在默认 PDF 查看器的 iframe 中禁用/隐藏下载按钮。
打开PDF去除下载按钮（pdf.js）
墨 尘
12-09 8040
最近在做一个打开pdf只要预览不要下载的功能，浏览器打开的话会有一个下载按钮，但是我不想要这个按钮，找了好久没找到去掉这个按钮的方法，最后我选择了用pdf.js。 其实pdf.js用起来还是挺简单的： 链接: https://pan.baidu.com/s/1itCT9_AK2HBPNxIC9fvV5w 提取码: ymtk 下载后解压，然后放到web工程里面 首先打开web目录下的view...
pdf.js浏览器点击a标签在线预览pdf文件并且将下载功能隐藏
qq_34266804的博客
07-22 2156
问题: 使用pdf.js，实现浏览器点击a标签在线预览pdf文件并且将下载功能隐藏（实现只查看，不下载） 需要的的工具： pdf.js 下载地址 链接：https://pan.baidu.com/s/18StIkW1iAINWDClJma50xg 提取码：8azn 代码 1.a标签点击代码 其中——href="压缩包解压在系统中的路径/web/viewer.html?file=文件路径#page=1" < a href="压缩包解压在系统中的路径/web/viewer.html?.
实现打开文件、但不让用户保存
twomeyla博客
06-21 1624
       前几天老大要求公司有些重要的文件（大多数是PDF），只允许查看，不允许保存和打印。要实现这个打开很容易，用个超链接在IE打开就搞掂了，但在打开之前，IE会自动弹出一个对话框，提供三个操作：打开、保存、取消。不用说，这一步就可以让用户保存文件了。其实网上有人建议用servet来做，在servlet里面读文件，然后返回给用户的只是文件的内容。但其实这跟超链接如出一辙，在文件显示之前，还有相应的操作让用户保存文件。但很多得一个朋友的网页内嵌的提示。让我解决了这个问题。一、网页内嵌PDF
PDF在线预览插件屏蔽打印 下载操作
08-23
PDF在线预览插件屏蔽下载与屏蔽打印功能,进行源代码的修改，杜绝非法用户进行PDF文件的下载与盗取操作。可以进行文件流实现PDF在线预览。 针对当前盖章签名的pdf 可以进行正常预览。 pdf.worker.js viewer.js 进行修改 并且进行重新编译。
如何让pdf只能预览不能下载
weixin_45897870的博客
08-16 1475
现在有个需求，只让pdf预览不让下载打印，研究了下pdfjs，views.html后面拼上的file=xxx路径，就是直接暴露在路径中的，，，直接打开即使隐藏了下载打印按钮也没用。就算是不暴露路径，用iframe标签，F12打开也能看到下载的文件。
浏览器在线预览pdf，隐藏右上角的下载按钮
一个还不成熟、正在努力成长的博客小站。
12-24 6508
在你的需要演示的URL地址后边加上代码 '#toolbar=0' 上边黑的一条工具栏就会隐藏掉。 没有加代码之前，可以直接下载，功能权限控制不了下载按钮， 加完代码以后 这一条就没有了。！！！ ...
通过pdfjs实现在VUE-CLI中进行PDF预览，并禁用打印及下载功能
qq_24800489的博客
06-02 5226
官网：PDF.js官方demo：PDF.js viewer下载本文主要针对vue-cli4版本的文件 因为pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误，所以需要把viewer.js文件内的抛出错误这一行报错注释掉 既然是新框架，肯定想先玩玩试试效果，很简单，页面放一个iframe，然后src等于到viewer.html的public路径，直接（pdfjs/***）即可。 效果就跟 官方
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp移动端H5在线预览PDF等文件实现源码及注解
10-13
本教程将详细讲解如何在uniapp移动端通过H5实现PDF和其他文件的在线预览功能。通过提供的源码和注解，开发者可以深入理解其实现机制，并在自己的项目中进行应用。 首先，我们需要了解uniapp的组件系统。uniapp允许...
js实现html中的pdf文件的在线预览、下载、打印等功能
07-06
本篇文章将深入探讨如何使用JavaScript实现HTML中的PDF文件在线预览、下载以及打印功能。我们将首先介绍相关的JavaScript库，然后通过一个简单的示例演示如何实现这些功能。 一、JavaScript PDF处理库 1. **PDF.js...
Java Servlet实现在浏览器中打开pdf文件
04-15
本篇文章将探讨如何使用Java Servlet实现在浏览器中打开PDF文件。首先，我们需要理解Servlet的工作原理和PDF文件的处理方式。 Servlet是Java编程语言中的一个接口，它定义了Web服务器与Java代码之间的交互方式。当...
浏览器显示预览pdf文件
06-29
默认情况下，某些安卓浏览器可能没有开启PDF查看功能，或者将其设置为下载文件而不是在线预览。 解决这个问题的一种方法是使用第三方PDF阅读器应用，如Adobe Acrobat Reader或Google Drive，它们通常提供内置的...
浏览器打开pdf，禁止下载打印
yyfhyf的博客
02-02 3842
之前在网站上打开pdf文件，都是用浏览器查看pdf时自带的功能，可以下载打印，最近要求打开pdf后仅供用户预览，禁止下载打印。虽然隐掉了页面上的下载打印的按钮，但是右键依然可以另存为和打印，所以可以在web/viewer.html加一个禁止右键。在页面中打开pdf链接的地方修改成链接到pdf/web/viewer.html的。例如：我这边用的是a标签。
在HTML或React中实现PDF文件预览，想要不允许下载等如何设置呢？
hongweilin2021的博客
10-30 6859
在HTML或React中实现PDF文件预览且要隐藏下载等按钮，得使用pdf.js框架方案，诸如iframe等HTML标签方式都不行。
IE浏览器PDF展示，禁止下载，禁止打印，禁止另存，禁止复制完美解决
行内元素如何居中
06-25 6225
1，IE浏览器下使用PDFObject，需求是只能预览不能下载不能另存及打印和复制， <template> <div id="ensur"> </div> </template> const { PDFObject } =require('../../../assets/js/PDFObject/pdfobject.js') var options = { height: "10...
Devexpress PdfViewer预览pdf，禁止下载，打印，复制
weixin_30367945的博客
03-15 1589
PDFviewer控件： 参数设置： 1、屏蔽书签栏和右键菜单 2、加载文档支持路径以及流stream加载的方式 1 pdfViewer.MenuManager.DisposeManager(); 2 pdfViewer.NavigationPaneVisibility=DevExpress.XtraPdfViewer.PdfNavigationPaneVisibility.Hidd...
用vue3使用pdfobject写一个预览pdf文件功能并且禁用下载功能
03-31
首先，需要安装pdfobject。 ```bash npm install pdfobject --save ``` 然后，在vue组件中引入pdfobject。 ```javascript import pdfobject from 'pdfobject'; ``` 接着，在组件的mounted钩子函数中使用pdfobject来预览pdf文件。 ```javascript mounted() { pdfobject.embed("url/to/pdf/file.pdf", "#pdf-preview", { pdfOpenParams: { view: "FitH", pagemode: "thumbs", toolbar: 0, statusbar: 0, messages: 0, navpanes: 0 }, fallbackLink: "<p>Your browser does not support PDFs. Please download the PDF to view it: <a href='url/to/pdf/file.pdf'>Download PDF</a>.</p>", forcePDFJS: true }); } ``` 在上面的代码中，第一个参数是pdf文件的url，第二个参数是pdf文件的容器元素的选择器，第三个参数是pdf预览选项。其中，pdfOpenParams可以设置打开pdf文件时的参数，fallbackLink是当浏览器不支持pdf时的回退链接，forcePDFJS设置为true时会强制使用PDF.js来渲染pdf文件。 最后，在组件中使用样式来隐藏pdf文件的下载按钮。 ```html <template> <div id="pdf-preview"></div> </template> <style> .pdfobject-container .pdfobject-toolbar button.download { display: none; } </style> ``` 这样就可以实现预览pdf文件并禁用下载功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值