微信小程序实现pdf预览(苹果安卓兼容)

微信小程序实现pdf预览

1 使用web-view

javascript 复制代码
// fileUrl为pdf文件网络路径     https://----.pdf
<web-view src="{{fileUrl}}"></web-view>

出现问题:苹果端显示正常,但是安卓端显示不了,这是因为Android 默认的 WebView 控件并不直接支持显示 PDF 文件,所以就由一下方法来解决。

2 使用wx.downloadFile()在成功之后使用wx.openDocument()

此方法兼容苹果端和安卓端

javascript 复制代码
//urll为pdf文件网络路径     https://----.pdf
  previewPdf(urll) {
    const that = this
    let url = urll
    wx.showLoading({
      title: '加载中'
    });
    wx.downloadFile({
      url,
      success: ({
        tempFilePath: filePath
      }) => {
        wx.openDocument({
          filePath,
          fail: (err) => {
            console.log('这是打开报错值:' + err)
          },
          complete: () => {
            wx.hideLoading()
          }
        })
      },
      fail: (err) => {
        console.log('这是请求报错:', err)
        wx.hideLoading()
      }
    })
  },
相关推荐
小徐_23339 小时前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
石山岭14 小时前
自己动手写了一个 Android 虚拟定位 App:GPSSimulate 技术实
android·前端
杉氧16 小时前
副作用 (Side Effects) 全攻略:如何像大师一样掌控 Composable 的生命周期?
android·架构·android jetpack
Kapaseker20 小时前
Kotlin Toolchain 0.11 发布:主要是把 Amper 干没了
android·kotlin
三少爷的鞋21 小时前
Android 现代架构不需要事件总线进阶篇
android
杉氧1 天前
深入理解 Compose 重组机制:快照系统如何驱动 UI 精准刷新?
android·架构·android jetpack
召钱熏1 天前
状态枚举正确≠渲染正确:一个语音按钮的状态机边界修复实录
android·前端
杉氧2 天前
深度解析:Jetpack Compose 核心架构与底层原理 —— 十年安卓老兵的“破茧重生”
android·架构·android jetpack
通玄2 天前
Jetpack Compose 入门系列(七):ViewModel 与界面状态管理
android
落魄Android在线炒饭2 天前
Android Framework 开发技巧:android.jar 生成与系统快速编译验证
android