【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS

您所在的位置：网站首页 › pdf转换文本小程序怎么弄 › 【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS

【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS

2023-08-04 02:49| 来源: 网络整理| 查看: 265

前言

提示：因最近项目需求，项目需要用uniapp来开发微信小程序预览pdf的功能, 后端以链接形式返回pdf地址。在这里插入图片描述

一、方法概述开始用uniapp提供微信自带方法：wx.downloadFile({ }) + wx.openDocument({ })，但发现android正常打开，IOS打不开的情况换种方式使用： web-view，uni-app 中web-view做链接跳转，但是出现IOS可以正常打开，android打不开的情况。综上：安卓手机用原生，ios手机用web-view 二、方法使用 1.第一种微信自带方法： //这里的 url 就是pdf文件的路径，直接调用此方法就可以打开pdf文件 androidOpenPdf(url) { uni.downloadFile({ url: url, success: function (res) { var filePath = res.tempFilePath; uni.openDocument({ filePath: filePath, success: function (res) { console.log("打开文档成功"); }, }); }, }); } 2.第二种web-view打开：

这里需要新建一个页面为webView

//这里跳转web-view页面， url 就是pdf文件的路径 uni.navigateTo({ url: "./webView/webView?contractUrl=" + this.contractUrl, });

webView页面：

export default { data() { return { src: '', } }, onLoad(option) { this.src = option.contractUrl } } 2.结合上述两种方法为： openPDF() { switch (uni.getSystemInfoSync().platform) { case "android": console.log("安卓"); // 这里直接调用原生的方法，我们上面定义的 this.androidOpenPdf(this.contractUrl); break; case "ios": console.log("IOS"); //这里跳转web-view页面 uni.navigateTo({ url: "./webView/webView?contractUrl=" + this.contractUrl, }); break; default: this.androidOpenPdf(this.contractUrl); break; } } 总结

通过上面的逻辑判断我们就可以解决在不同系统手机上完美加载pdf文件的功能了如果有更好的方法或者需要改进的地方欢迎留言交流，如果对你有帮助的话，欢迎点赞收藏哦~。

【本文地址】

【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS

【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS

今日新闻

推荐新闻