前端H5页面 iframe内置pdf 无法全部展示pdf的内容，并且苹果手机无法下滑

已于 2024-03-01 11:24:22 修改
阅读量1.2k 收藏 9
点赞数 9
文章标签： pdf html5 javascript
于 2024-03-01 10:56:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61843526/article/details/136389932
版权
文章讨论了如何在iframe中嵌入PDF文件，虽然有解决方案使PDF铺平显示，但遇到高度限制导致苹果手机下滑问题。作者寻求大佬们的更多见解以改进这一问题。
摘要由CSDN通过智能技术生成

iframe 内置pdf文件 打开后 由于pdf下面还有盒子需要进行内容展示，pdf文件无法铺平及展示

在网上调查了很多，还是没找到pdf铺平的解决办法：

<iframe id="pdf iframe" width="100%" height="600px" :src="'pdfis/web/viewer.html?file='+ pdfurl " cass="ifRame" scrolling-"yes'frameborder="o" @load="loadFrame"></iframe>

最后使用这个办法解决。

但是次方法有一个弊端：

iframe的标签的height 不能超出屏幕。否则，苹果手机还是无法下滑。影响到下面的签名和流程的展示。

此问题欢迎大佬们说出自己的看法。

李欢253
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
embed预览pdf_09.html使用iframe、embed查看pdf不显示(未解决)，使用pdf.js预览pdf
weixin_35255536的博客
12-30 1281
前几天做一个网页上查看pdf等文档的功能，然后网上查了一下发现可以使用iframe来预览，然后就去试了一下然后去试了一下，发现控制台报错，页面上iframe里面的body也是空的Resource interpreted as Document but transferred with MIME type application/pdf:去网上查了一下，也没有发现什么有用的信息，本来以为可能是返回时...
iframe页面显示不全_Iframe srcdoc接收html在iPhone的公众号显示空白
weixin_35798040的博客
01-20 1165
绑定银行卡功能1.：后端返回银联包含form表单的页面绑定；2.前端用iframe的srcdoc处理，在H5页面正常显示、安卓手机微信公众号正常显示、但是在iPhone的公众号srcdoc不生效iframe展示接收的htmlloading后跳转银联iPhone公众号不生效3.改用document.write方式处理 <iframe id="iframe" ...
全端兼容的前端h5预览pdf插件
03-22
全端兼容的前端h5预览pdf插件,开箱即用，完美兼容PC和移动端 直接引用pdf.html?file=/upload/pdf.pdf即可
HTML内嵌pdf在ios设备上无法正常显示
shaojie_45的博客
11-25 2089
今天在制作网页的时候，需要内嵌一个pdf，使用html中的embed来实现： 在电脑端显示的是可以滑动浏览的内嵌pdf，但是在ios移动端设备上，显示的是被压缩的、比例不对的pdf文件，且无法滑动浏览。
html5中的iframe
最新发布
m0_73280507的博客
07-05 550
iframe>浏览上下文是浏览器展示文档的环境，通常是一个tab标签页，一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制，只有两个同源的浏览器上下文，才能打开和使用通讯接口。
vue+iframe预览pdf，页面显示pdf外框但是内容空白解决
weixin_42567822的博客
05-08 3681
vue项目中有一个页面需要预览pdf，根据列表切换pdf显示的效果。
uniApp预览PDF文件 ，遇到的问题
qq_41859063的博客
05-04 3727
众所周知，移动端的兼容性是不能和pc端比较的，这次项目移动端使用pdf.js预览pdf，就让我踩了无数的坑，下面介绍一下，做法 首先下载pdf.js,官网下载即可，也可私聊我，发给你。 下载完成后将文件夹放在static文件夹下，如图： 我们使用web-view预览，首先创建显示预览pdf的页面，只需要将allUrl赋值为：this.allUrl = /static/pdfjs/web/viewer.html?file=${url}就可以啦，${url}是后面转换出来的文件url <template
iphone中访问带有iframe的网页无法显示全部内容
Code-Create-World
06-14 9044
今天在解决公司平台网页在手机端访问兼容性问题时，遇到index页面通过iframe嵌入右边内容页面在anroid显示正常（主要为：页面内容超过iframe高度、宽度，可以正常显示滚动条，也可以滑动显示），但是在iphone自带的浏览器或者在iphone下载其他浏览器访问，iframe内容均无法全部显示，主要表现为： 1、iframe只显示了嵌入内容的部分，无法显示全部，感觉内容被截掉了 ...
09.html使用iframe、embed查看pdf不显示(未解决)，使用pdf.js预览pdf
夜听雪的博客
12-10 6426
前几天做一个网页上查看pdf等文档的功能，然后网上查了一下发现可以使用iframe来预览，然后就去试了一下 <iframe width="100%" height="95%" seamless scrolling="yes" :src="iframeSrc"></iframe> 然后去试了一下，发现控制台报错，页面上iframe里面的body也是空的 Resour...
【AngularJs】前端使用iframe预览pdf文件报错
smart_dream
04-15 976
报错信息 Can't interpolate: {{vm.previewUrl}} Refused to display 'https://XXXXX'in a frame because it set 'X-Frame-Options' to 'deny'.
ios pdfjs 显示pdf不全_有关前端和pdf相关的几件事
weixin_34736362的博客
01-20 1513
有关前端和pdf相关的几件事 pdf（Portable Document Format的简称，意为“便携式文档格式”）前端工作中，也避免不了要和pdf打交道，以下列一些相关的信息预览pdf的方法通过浏览器自己的能力直接<a href="pdf地址" >打开新的页面iframe/object <iframe src="pdf地址">embed <embed :src="...
pdfh5.js PC端与手机端h5页面pdf展示
03-17
PDFH5.js是一款专门用于在PC和移动设备的H5页面上展示PDF文件的JavaScript库。这个库利用了现代浏览器的APIs，如HTML5的Canvas和Fetch，以实现跨平台、高性能的PDF渲染。在前端开发中，尤其是在构建响应式网站或Web...
H5自动展示pdf文件，pdf.js
08-11
总的来说，"H5在线展示pdf文件包"通过PDF.js库实现了在H5页面中无缝展示PDF文件的功能，使得用户无需离开网页或安装额外软件就能查看PDF内容。对于开发者而言，这是一个强大的工具，极大地丰富了Web应用的功能。
h5 页面中内容的全部展示和收缩
11-21
这个页面主要展示如果一个页面中的内容特别多的时候，内容收缩展示部分内容，点击展示之后，显示所有的内容，点击收缩展示部分的内容。
H5+JS页面直接查看PDF文件
12-07
5. **渲染PDF页面**：每一页的PDF内容都需要单独渲染。PDF.js提供了一个`getPage()`方法，可以获取到指定页码的Page对象，然后调用`render()`方法将其画到Canvas上。 ```javascript pdf.getPage(pageNumber).then...
pdf h5页面资源打包
02-17
3. **集成 H5 与 PDF**：通过 JavaScript 库如 PDF.js（由 Mozilla 开发）来加载和展示 PDF 文件，同时将 H5 元素嵌入到 PDF 页面旁边或内部。这通常需要处理页面布局，确保两者协调一致。 4. **处理交互**：使用 ...
IOS端 html网页内iframe的嵌套网页无法向下滚动
Drumsticks的博客
06-17 1414
IOS端 html网页内iframe的嵌套网页无法向下滚动 问题描述：最近接的网站项目一个页面需要选择城市，于是就做了一个iframe嵌套，在安卓上没有任何问题，但是在ios上就不能向下滚动 问题原因： 原因吧，估计还是ios不兼容iframe吧 解决方法： 1：用一个div包含iframe 2：给这个div设置样式 div { -webkit-overflow-scrolling: touch;...
html iframe显示不全,滚动的iframe解决，但在iframe页面显示不全
weixin_31064353的博客
06-20 2472
我试图滚动iOS上的iframe，我成功了，它的滚动的好，参考：滚动的iframe解决，但在iframe页面显示不全但是，所有的解决方案都有一个问题：iframe页面没有完全显示...我测试了我的iphone和ipad，iframe页面显示波涛汹涌。 有什么想法吗？例子：$(function(){if (/iPhone|iPod|iPad/.test(navigator.userAgent))$(...
iframe嵌入页面白屏_封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
weixin_39588983的博客
12-01 222
在页面中嵌入PDF文件在上一篇《在html页面中嵌入其他页面的方法——零基础自学网页制作》(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作。今天我们来嵌入一个pdf文件。其实使用示例代码如下： 页面效果如下：考虑到pdf的版权问题就不给大家上传云盘了，大家可以找其他pdf文件代替即可。如果您对这本书感兴趣可以关注并私信我。除此之外再给大家介绍两个新标签。一个是标签，一个是标签。标签和标签...
pdfh5.jspc端与手机端h5页面pdf展示_pdfh5资源-csdn文库
07-27
pdfh5.jspc端与手机端h5页面pdf展示是指在不同设备上展示PDF文档的一种技术实现方式。基于pdfh5资源，可以在不同设备上实现高效、稳定的PDF展示功能。 pdfh5.jspc端是指在传统的电脑或者平板设备上使用的pdfh5插件，通过将PDF文档转换成H5格式进行展示。jspc端的pdfh5页面可以在浏览器中打开，用户可以通过滚动鼠标或者使用键盘操作来翻页、缩放等功能。这种展示方式适用于屏幕较大的设备，用户可以更好地观看和操作PDF文档。 手机端H5页面pdf展示是指在手机设备上使用的pdfh5插件，通过适配手机设备的屏幕尺寸和操作方式，将PDF文档转换成H5格式进行展示。这种展示方式可以在手机浏览器中打开，用户可以通过手势操作来翻页、缩放等功能。因为手机屏幕较小，所以一般会对PDF文档进行自适应缩放，以保证用户能够清晰地阅读。 pdfh5资源是指用于pdfh5.jspc端和手机端H5页面pdf展示的资源文件，包括PDF文件本身以及H5展示所需的HTML、CSS、JavaScript等文件。这些资源可以通过网络加载，也可以缓存在本地，以提高展示的速度和效果。通过使用pdfh5资源，可以实现跨平台、跨设备的高质量PDF展示体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值