使用iframe展示pdf

最新推荐文章于 2024-01-31 15:09:05 发布
最新推荐文章于 2024-01-31 15:09:05 发布
阅读量3.1k 收藏 3
点赞数 2
分类专栏： 如何在页面中展示pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_yaya_chen/article/details/109205419
版权

代码如下：

 <iframe src={`${pdfUrl}#page=${pageNumber}&toolbar=0`} frameBorder="0" style={{width: '100%', height: '100%'}} /> }

pdfUrl：pdf路径
toolbar=0：隐藏下载、打印等功能
page={page}：可以直接跳转到指定页面

_耳东晨_
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe标签实现pdf预览功能
05-29
iframe标签实现pdf预览功能
Vue项目中，利用iframe在线预览pdf/图片等
最新发布
RumbleWx的博客
06-14 310
在components下新建 src/components/FilePreview/index.vue。在components下新建 src\components\iFrame\index.vue。
html5 跨iframe的拖拽实现移动端页面设计器
08-07
NULL 博文链接：https://zhangzhaoaaa.iteye.com/blog/2117172
pdf在iframe页面中的使用
Lcc的博客
01-22 1181
实际项目中可能用到的操作有：放大两倍 隐藏工具栏 隐藏滚动条等配置。
iframe嵌套pdf文档，鼠标中键无法控制滚动条
weixin_47239395的博客
08-20 528
属于嵌入式项目的,运行在自己项目中是完全没问题,嵌入到其他项目中就完全不行了,于是百度了一下,找到很多说这个的问题,大概试了一下,o的k // 在自己项目的入口index.html文件上添加这一句,完全解决了我的问题 <body onmousewheel= "top.document.body.scrollTop-=event.wheelDelta "/> // 注意项目开头如果是这个写法需要改一下----(错误写法) <!DOCTYPE html PUBLIC "-//W3C//D
拿到pdf当前页，用iframe + pdfjs 加载pdf文件
蒲小若的博客
01-21 3806
window.frames['iframe的name'].document.getElementById('pageNumber').value   js中拿到当前页码 window.frames['iframeRef'].document.getElementById('pageNumber').value   html： &lt;iframe v-if="viewportMark....
vue3中使用 iframe 查看pdf 影响路由跳转问题
世上没有真正的感同身受
06-09 792
iframe
pdf-iframe.zip
08-31
手头的项目有这样一个需求，审核报告开发，左侧是PDF，右侧是审核的辅助信息。 解决方案： a 写一个总的iframe，分为两个小iframe； b 利用itext生成所需要的报告...c 调用controller里的pdf方法把数据传输到页面展示。
把PDF文件展示在前端页面
09-05
总的来说，`touchpdf-master`压缩包提供了一个前端展示PDF的解决方案，通过解析PDF文件并在前端渲染，结合CSS定制样式和JavaScript实现交互，可以为用户提供无缝的在线阅读体验。在实际项目中，你需要根据具体需求...
iframe高度自适应.pdf
12-08
iframe高度自适应.pdf
跨域在线批量展示pdf并且打印pdf
09-21
在IT行业中，尤其是在Web开发领域，跨域在线批量展示PDF并打印PDF是一个常见的需求。这个需求通常涉及到前端技术，特别是JavaScript框架，如Angular2（现在应该是Angular 2+，因为Angular2之后有多个版本更新）。在...
js控制去掉iframe里面PDF文件的下载等功能
孜然卷的博客
09-14 4960
js控制去掉iframe里面PDF文件的下载等功能
iframe预览pdf默认侧边栏工具栏处于关闭
weixin_44735965的博客
12-25 1548
1.1设置默认缩放比例： 在地址栏后面拼接 “#zoom=200”1.5 默认侧边栏工具栏处于关闭状态 navpanes=0。1.4自适应页面大小： view=FitH,top。1.3隐藏头部工具栏 ： toolbar=0。有些PDF形式打开的文件需要一些默认的配置。1.2 跳往特定页数： page=2。
文件流转换成PDF在iframe中显示，并调用打印
YY_WYG的博客
03-23 2189
先放个效果大图需求描述：这个word文档在后端存着，需要获取它的流，然后实现一个预览这个word的功能，然后下载、打印。预览的时候，本来要预览doc,但是查了一些up,都说doc显示的话文档格式有问题之类的bug,就决定转换成pdf,再预览了。。。
隐藏iframe的顶部操作栏
qq_38181746的博客
09-07 1564
隐藏iframe的顶部操作栏 在iframe中预览pdf顶部会有一行操作栏，里面有打印，但是我只想让他预览不让打印，打印另做处理 在iframe标签中的预览地址后面加上#toolbar=0 效果
iframe预览pdf，隐藏下载和打印按钮的解决方案
热门推荐
c_qianxia5040的博客
08-27 1万+
在嵌入的地址后面加’#toolbar=0’就可以了 <iframe id="iframe2" :src="JiaoanPdfUrl+'#toolbar=0'" ref="ifr2" frameborder="0" width="100%" :height="h
react 使用iframe预览pdf文档（存在兼容性问题）
weixin_42215167的博客
08-30 1293
<iframe src={pdfUrl + '#toolbar=0'}//url后加上的内容可隐藏顶部的下载等选项 width="100%" height="100%" frameBorder={0}//边框设置 scrolling="no"//滚动设置 ></iframe>
小知识：如何防止在iframe src上自动下载doc/docx/pdf文件，并禁用隐藏工具栏
weixin_45239102的博客
01-31 2570
需求是把pdf在iframe上展示，但是进入页面时会自动触发下载，解决办法：在src路径有拼接 '#toolbar=0'
VUE框架 前端页面使用iframe展示PDF 文件，如何隐藏下载 打印等按钮，仅展示PDF
06-03
可以通过在 iframe 中嵌入 PDF 文件时，使用一些特定的参数来控制 PDF 文件的显示。具体来说，可以使用 PDF.js 的 web/viewer.html 页面来实现这个功能。 具体的步骤如下： 1. 下载 PDF.js 库，并将其解压到你的项目中。 2. 在你的 HTML 页面中，添加一个 iframe 标签，用于显示 PDF 文件： ```html <iframe id="pdf-iframe" src="pdfjs/web/viewer.html?file=example.pdf"></iframe> ``` 其中，src 属性中的 file 参数指定了要显示的 PDF 文件的路径。 3. 在 JavaScript 中，通过获取 iframe 的 contentWindow 和 contentDocument 属性，来控制 PDF 文件的显示。具体来说，可以通过以下代码隐藏 PDF 文件中的工具栏和菜单栏： ```javascript const iframe = document.getElementById('pdf-iframe'); const contentWindow = iframe.contentWindow; const contentDocument = contentWindow.document; contentWindow.PDFViewerApplication.hideToolbar(); contentWindow.PDFViewerApplication.contextMenuItems = []; ``` 其中，PDFViewerApplication 是 PDF.js 库中的一个全局对象，可以用来控制 PDF 文件的显示。hideToolbar 方法可以隐藏 PDF 文件中的工具栏，contextMenuItems 属性可以用来控制 PDF 文件中的菜单栏。 4. 最后，你需要在 CSS 中设置 iframe 的样式，使其填充整个页面： ```css #pdf-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } ``` 这样，你就可以在前端页面使用 iframe 展示 PDF 文件，并且隐藏下载、打印等按钮，仅展示 PDF 内容了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值