微信小程序实现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()
      }
    })
  },
相关推荐
张小姐的猫12 小时前
【MySQL】访问 & 数据流动原理
android·数据库·mysql·adb·1024程序员节
朱涛的自习室15 小时前
212 个需求、22 万行代码:Agent 接管开源项目的 19 天
android·前端·人工智能
多客:duokelijie17 小时前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
传奇开心果20 小时前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
android·flutter
哲鲤20 小时前
AOSP思绎|Android 多媒体:一段视频为什么需要这么多服务
android
阿杰m20 小时前
Android源码第三章:Handler、Looper 与 MessageQueue——一条消息如何入队、唤醒并执行
android
海雅达手持终端PDA1 天前
巡线、深井、爆管抢修与极寒水网的硬件矩阵怎么配?海雅达水务巡检终端PDA选型指南
android·物联网·5g·集成测试·能源·政务
恋猫de小郭1 天前
Flutter 开始支持 Jetpack Compose Platform View
android·前端·flutter
三少爷的鞋2 天前
Android 架构七条铁律:架构师真正设计的不是代码,而是秩序
android
xiangxiongfly9152 天前
Android GsonFactory总结
android·gson·gsonfactory