【uniapp】微信小程序中预览PDF

开心你就笑！！哈哈哈

已于 2023-07-19 17:21:01 修改

阅读量5.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app pdf

于 2023-01-10 11:07:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38673922/article/details/128626373

前端同时被 2 个专栏收录

48 篇文章

订阅专栏

uni-app

27 篇文章

订阅专栏

文章讲述了在uniapp开发中遇到的问题，即使用wx.downloadFile和wx.openDocument方法在Android上能正常打开PDF，但在iOS上不行。为解决此问题，作者采用了web-view组件，发现iOS可以正常工作，但Android不行。最终的解决方案是根据平台（Android使用原生方法，iOS使用web-view）来分别处理PDF的打开方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一、方法概述

开始用uniapp提供微信自带方法：wx.downloadFile({ }) + wx.openDocument({ })，但发现android正常打开，IOS打不开的情况
换种方式使用： web-view，uni-app 中web-view做链接跳转，但是出现IOS可以正常打开，android打不开的情况。
综上：安卓手机用原生，ios手机用web-view

二、方法的使用

1、android正常打开，IOS不生效

//这里的 url 就是pdf文件的路径，直接调用此方法就可以打开pdf文件
//url:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
androidOpenPdf(url) {
  uni.downloadFile({
    url: url,
    success: function (res) {
      var filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        success: function (res) {
          console.log("打开文档成功");
        },
      });
    },
  });
}

2、ios可以正常跳转，Android是不生效的

<web-view :src="webUrl"></web-view>

data() {
	return {
		webUrl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf';
	}
}

效果图

在这里插入图片描述

结合上述两种方法为

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;
  }
}