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页面就好了

相关推荐
计算机毕设定制辅导-无忧学长11 小时前
基于uni-app的“民族风韵”特色购物小程序
uni-app
一个处女座的程序猿O(∩_∩)O11 小时前
UniApp 生命周期全解析:从应用到页面,再到组件的完美协奏曲
前端·uni-app
H_ZMY12 小时前
微信小程序 mp-html:专为小程序设计的富文本渲染组件
微信小程序·小程序·html
你听得到1113 小时前
Web前端们!我用三年亲身经历,说说从 uniapp 到 Flutter怎么转型的,这条路我爬过,坑我踩过
前端·flutter·uni-app
IT 前端 张15 小时前
Uniapp全局显示 悬浮组件/无需单页面引入
前端·javascript·uni-app
行云流水62616 小时前
uniapp h5图片长按隐藏默认菜单弹出
前端·javascript·uni-app
诸神缄默不语17 小时前
如何用Python处理文件:Word导出PDF & 如何用Python从Word中提取数据:以处理简历为例
python·pdf·word
i***665017 小时前
SpringBoot实战(三十二)集成 ofdrw,实现 PDF 和 OFD 的转换、SM2 签署OFD
spring boot·后端·pdf
777VG20 小时前
Vue3+vue3-pdf-app@1.0.3实现加载 .pdf文件
前端·javascript·vue.js·pdf
ComPDFKit20 小时前
Salesforce原生PDF编辑的重要性:效率、合规性与用户体验
大数据·pdf·ux