微信小程序实现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()
      }
    })
  },
相关推荐
WangHappy1 小时前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
砖厂小工4 小时前
用 GLM + OpenClaw 打造你的 AI PR Review Agent — 让龙虾帮你审代码
android·github
张拭心5 小时前
春节后,有些公司明确要求 AI 经验了
android·前端·人工智能
张拭心5 小时前
Android 17 来了!新特性介绍与适配建议
android·前端
小时前端6 小时前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Kapaseker7 小时前
Compose 进阶—巧用 GraphicsLayer
android·kotlin
黄林晴8 小时前
Android17 为什么重写 MessageQueue
android
icebreaker1 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker1 天前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
阿巴斯甜1 天前
Android 报错:Zip file '/Users/lyy/develop/repoAndroidLapp/l-app-android-ble/app/bu
android