js控制去掉iframe里面PDF文件的下载等功能

通过在iframe的src属性后添加?page=hsn#toolbar=0的参数,可以轻松移除页面顶部的功能栏,实现更纯净的展示效果。这种方法适用于需要无干扰显示内容的场景。

原代码:

<iframe id="myIframe" src={`${src}`} style={{ width: '100%', height: '100vh' }}></iframe>

效果: 

要去掉顶部的功能栏只要在src后面拼接一下'?page=hsn#toolbar=0'

<iframe id="myIframe" src={`${src}?page=hsn#toolbar=0`} style={{ width: '100%', height: '100vh' }}></iframe>

 修改后效果:

PS新方法  base64文件格式  后面加#toolbar=0也可以消除顶部

 src={`${selectList.template_url}#toolbar=0`}

在 Vue3 应用中使用 `iframe` 预览 PDF 时,可以通过在 `src` 属性中添加参数来隐藏工具栏,从而去除下载和打印按钮。具体做法是,在 `iframe` 的 `src` 后拼接 `#toolbar=0` 参数,这样可以禁用 PDF 预览时的顶部工具栏,隐藏下载、打印等操作按钮。 例如,以下是一个 Vue3 组件中使用 `iframe` 预览 PDF 并隐藏工具栏的实现方式: ```vue <template> <div> <iframe :src="pdfUrl + '#toolbar=0'" frameborder="0" style="width: 100%; height: 99%" ></iframe> </div> </template> <script setup> import { ref } from 'vue' const pdfUrl = ref('/static/pdf/sample.pdf') </script> ``` 上述代码中,`#toolbar=0` 是 PDF.js 提供的一个参数,用于控制 PDF 预览时是否显示顶部工具栏。通过将该参数附加到 PDF 文件的 URL 末尾,可以有效地隐藏下载和打印功能[^2]。 此外,也可以使用 `embed` 或 `object` 标签替代 `iframe` 来嵌入 PDF 文件,并通过类似方式控制工具栏的显示状态。例如: ```vue <template> <div> <embed :src="pdfUrl + '#toolbar=0'" type="application/pdf" width="100%" height="600" /> </div> </template> ``` 这种方式同样可以实现 PDF 的嵌入式预览,并通过 `#toolbar=0` 参数隐藏工具栏中的下载和打印选项[^3]。 需要注意的是,虽然通过 `#toolbar=0` 可以隐藏工具栏,但并不能完全阻止用户通过浏览器开发者工具或其他方式访问 PDF文件。如果需要更严格的权限控制,建议在后端进行访问限制,或使用 PDF 数字版权管理(DRM)技术来防止文件下载或打印。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值