跳至主要內容

iframe标签隐藏操作栏

三思原创大约 2 分钟前端前端iframe

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

image
image

iframe标签的使用(隐藏操作栏)

iframe标签在预览pdf文档时,顶部默认会有一行操作栏,可供用户下载、打印等。因在工作中遇到过一次这样的需求,需要控制用户的下载权限,网上大部分是说iframe无法控制,都推荐用pdf.js插件,但我总感觉应该可以的,功夫不负有心人,最终还是被我找到了,此方法基本可行,特此记录

一、基本用法

<iframe  ref="iframe"
         height="700"
         width="100%"
         :src="pdfurl"
         frameborder="0"
></iframe>
属性Value描述
alignleft
right
top
middle
bottom
不赞成使用。请使用样式代替。
规定如何根据周围的元素来对齐此框架。
frameborder1
0
规定是否显示框架周围的边框。
heightpixels
%
规定 iframe 的高度。
longdescURL规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheightpixels定义 iframe 的顶部和底部的边距。
marginwidthpixels定义 iframe 的左侧和右侧的边距。
nameframe_name规定 iframe 的名称。
sandbox“”
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
启用一系列对 中内容的额外限制。
scrollingyes
no
auto
规定是否在 iframe 中显示滚动条。
seamlessseamless规定 看上去像是包含文档的一部分。
srcURL规定在 iframe 中显示的文档的 URL。
srcdocHTML_code规定在 中显示的页面的 HTML 内容。
widthpixels
%
定义 iframe 的宽度。

二、隐藏顶部操作栏

如果要隐藏下载和打印按钮:
在嵌入的地址后面加’#toolbar=0’就可以了

<iframe  ref="iframe"
         height="700"
         width="100%"
         :src="data.file_url + '#toolbar=0'" // 在地址后面加'#toolbar=0'就可以了
         frameborder="0"
       ></iframe>

效果图

image