uniapp开发微信小程序,使用web-view预览PDF文件安卓真机测试加载不到

先说功能需求,点击A页面的书本,跳转到B页面预览相应的PDF格式文件内容

最初的写法是直接在A页面写方法做跳转并传链接参数,B页面接收,并使用web-view做预览,此方法只能在ios正常预览,Android不显示。

A页面

B页面

通过百度查询知道uniapp开发微信小程序时使用web-view跳转pdf文件链接时,Android是不生效的,ios可以正常跳转

解决方法:

在A页面的跳转方法中写一个判断方法,判断手机为Android或者IOS,若为Android,则在A页面直接预览,若为IOS,则跳转B页面后预览

代码如下

curriculumItem为点击方法传的参数

urlSrc为pdf文件链接

goPdf(curriculumItem){
				let urlSrc = this.theUrl + curriculumItem.pdf_file
				console.log("urlSrc")
				uni.getSystemInfo({
					success: res => {
						console.log(res.platform);
						if (res.platform === 'android') {
							wx.downloadFile({
								url: urlSrc,
								success: function(res) {
									const filePath = res.tempFilePath;
									wx.openDocument({
										filePath: filePath,
										success: function(res) {
											console.log('打开文档成功');
										}
									});
								}
							});
						} else {
							uni.navigateTo({
								url: './thepdf?curriculumItem=' + JSON.stringify(curriculumItem)
							});
						}
					}
				});
			}

如果不够清楚,可以看这位博主的文章

参考链接:

解决uniapp开发微信小程序预览pdf文件ios\安卓兼容问题_学习路漫漫的博客-CSDN博客_uniapp 小程序预览pdf问题项目需要用uniapp来开发微信小程序,其中,有一个功能是预览pdf, 后台以链接形式返回pdf地址,一开始使用web-view做链接跳转,但是出现ios文件可以正常打开,android打不开的情况,本来想用pdf.js做,后来发现微信自带的有一个API可以打开文档,于是就试了下。解决方法wx.downloadFile({url: 'https://xxxx.xx/example.pdf',success: function(res) {consthttps://blog.csdn.net/weixin_44902450/article/details/111367542?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164845186316782246487169%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164845186316782246487169&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3-111367542.142^v5^pc_search_result_cache,143^v6^control&utm_term=uniapp+%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%AE%BE%E7%BD%AEpdf%E5%9B%BE%E7%89%87+%E5%AE%89%E5%8D%93%E6%89%8B%E6%9C%BA%E4%B8%8D%E8%83%BD%E6%89%93%E5%BC%80&spm=1018.2226.3001.4187 

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值