iframe标签隐藏操作栏
原创大约 2 分钟
介绍了如何使用iframe标签嵌入PDF文档并隐藏顶部操作栏,通过在嵌入地址后加'#toolbar=0'实现隐藏下载和打印按钮的效果。详细讲解了iframe标签的基本用法和属性,提供了简洁的代码示例和展示效果图。

iframe标签的使用(隐藏操作栏)
iframe标签在预览pdf文档时,顶部默认会有一行操作栏,可供用户下载、打印等。因在工作中遇到过一次这样的需求,需要控制用户的下载权限,网上大部分是说iframe无法控制,都推荐用pdf.js插件,但我总感觉应该可以的,功夫不负有心人,最终还是被我找到了,此方法基本可行,特此记录
一、基本用法
<iframe ref="iframe"
height="700"
width="100%"
:src="pdfurl"
frameborder="0"
></iframe>
属性 | Value | 描述 |
---|---|---|
align | left right top middle bottom | 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 |
frameborder | 1 0 | 规定是否显示框架周围的边框。 |
height | pixels % | 规定 iframe 的高度。 |
longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述。 |
marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
name | frame_name | 规定 iframe 的名称。 |
sandbox | “” allow-forms allow-same-origin allow-scripts allow-top-navigation | 启用一系列对 中内容的额外限制。 |
scrolling | yes no auto | 规定是否在 iframe 中显示滚动条。 |
seamless | seamless | 规定 看上去像是包含文档的一部分。 |
src | URL | 规定在 iframe 中显示的文档的 URL。 |
srcdoc | HTML_code | 规定在 中显示的页面的 HTML 内容。 |
width | pixels % | 定义 iframe 的宽度。 |
二、隐藏顶部操作栏
如果要隐藏下载和打印按钮:
在嵌入的地址后面加’#toolbar=0’就可以了
<iframe ref="iframe"
height="700"
width="100%"
:src="data.file_url + '#toolbar=0'" // 在地址后面加'#toolbar=0'就可以了
frameborder="0"
></iframe>
效果图