uniapp开发微信小程序,webview内嵌h5,h5打开pdf地址,解决方案

根据公司要求,让我写一个h5,后续会嵌入到合作公司的微信小程序的webview中,如果是自己公司微信小程序,可以采取先下载下来pdf,然后通过wx.openDocument,进行单纯的预览操作,这个可以根据这个老哥的文章去操作。但是因为是合作方公司,故只能自己想办法,起初想到的方案是在h5里面用iframe打开这个pdf地址(类似这种oss地址:https://tj-d8.oss-cn-ou.aliyun_report/xxxx.pdf)但是众所周知,微信小程序内嵌webview的域名是需要配置业务域名的,以及该域名内的iframe网址也是需要配置业务域名,那么就没办法配置这个oss地址为业务域名。所以经过问了一个群里大哥,大哥给出了这个解决方案:

大致思路就是 自己写个pc页面,然后在页面里面iframe引入pdf,然后在小程序嵌入的h5里面iframe这个pc页面。h5 和pc页面 都需要配置业务域名,但是读到这里,大家就有疑问了,不就是多嵌套了一层页面然后还是iframe嵌入的pdf吗,对的! 接下来骚操作来了!

进入这个网址:PDF.jsA general-purpose, web standards-based platform for parsing and rendering PDFs.https://mozilla.github.io/pdf.js/

下载下图中两个文件:

下图是写的pc页面:

然后在viewer.html页面里面写iframe 然后src这么写:

接下来大家看明白了吧 相当于用下载下来的那两个文件去读取pdf地址,然后嵌入自己本项目中的viewer.html页面里 ,然后iframe引入这个 viewer.html页面就好了

相关推荐
用户7884773163421 分钟前
门店核销闭环:小程序扫码 + .NET 幂等接口 + WPF 看板,一天能跑通
微信小程序·c#
XLYcmy2 小时前
PDF 论文处理器 — 优势与功能文档
大数据·python·网络安全·pdf·dify·rag·漏洞检测
闭包不眠5 小时前
PDF文字提取交付前该检查什么
运维·服务器·图像处理·人工智能·计算机视觉·pdf
Latchh6 小时前
PDF提取到文字后怎样发现乱码
图像处理·人工智能·计算机视觉·pdf
愚公搬代码7 小时前
【愚公系列】《微信小程序项目实战(AI编程+视频图解)》014-莫凡商城小程序项目视图容器组件的应用
微信小程序·小程序·ai编程
XLYcmy7 小时前
PDF 论文处理器 — 技术报告文档
数据库·python·网络安全·pdf·embedding·dify·rag
deepseek238 小时前
PDF 涂黑失效拆解:谷歌数据中心 52.65 兆瓦与 7.65 亿加仑的账本,被一次复制粘贴揭开
人工智能·pdf·数据中心
2601_9499506317 小时前
练题簿在线免费刷题 从资料整理到考前自测
面试·职场和发展·pdf·word·刷题
郑州光合科技余经理19 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
Dovis(誓平步青云)20 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑