微信小程序文件实现下载并预览(ios及安卓手机)

位置:首页>文章>详情   分类: 教程分享   阅读(84)   2024-05-15 10:38:02

针对ios手机,wx.downloadFile方法要设置filePath,指定文件下载后存储的路径 (本地路径), 才可预览文件

// 下载
Component({
  properties: {
    lists: {
      type: Array,
      value: []
    }
  },
  data: {},
  ready: function() { },
  methods: {
    // 判断文件类型
    whatFileType(url){
      let sr = url.lastIndexOf('.') //  最后一次出现的位置
      let fileType = url.substr((sr+1)) // 截取url的类型
      return(fileType)
    },
    
    // 下载文件
    /**
     * 本地文件存储的大小限制为 10M
     */
    onDown(e){
      let fileTypes = ['doc','docx','xls','xlsx','ppt','pptx','pdf']
      let imageTypes = ["jpg", "jpeg", "png"]
      let fileType = this.whatFileType(e.target.dataset.fileurl)
      let fileId = e.target.dataset.filed
      wx.showLoading({
        title: '加载中',
      })
      wx.getSavedFileList({  // 获取文件列表
        success(res) {
          res.fileList.forEach((val, key) => { // 遍历文件列表里的数据
            // 删除存储的垃圾数据
            wx.removeSavedFile({
              filePath: val.filePath
            });
          })
        }
      })
      wx.downloadFile({
        url: e.target.dataset.fileurl,
        //fileId也可以是中文文件名称
        filePath: wx.env.USER_DATA_PATH + "/"+ fileId + "."+fileType,
        method: 'GET',
        success: function(res){  
           if(fileTypes.includes(fileType)){
            wx.openDocument({
              filePath: res.filePath,
              showMenu: true,
              flieType: fileType,
              success: function (res) {
                wx.hideLoading()
                console.log('打开文档成功')
              },
              fail: function(err){
                wx.hideLoading()
                console.log('打开文档失败:', err)
              }
            });
           }else if(imageTypes.includes(fileType)){
            wx.hideLoading()
            wx.previewImage({
              showmenu: true,
              current: res.filePath, // 当前显示图片的http链接
              urls: [res.filePath] // 需要预览的图片http链接列表
            })
           }else{
            wx.hideLoading()
            wx.showModal({
              title: '提示',
              content: "文件类型不支持预览",
              showCancel: false
            })
           }
        },
        fail: function (err) {
          wx.hideLoading()
          wx.showToast({
            title: "下载超时",
            icon: 'none'
          })
          console.log('下载失败:', err);
        }
      })
    }
    
 
  }
})

最新版代码去掉了wx.saveFile方法。直接wx.downloadFile后wx.openDocument即可预览,忽略了保存文件方法

下载文件且重命名兼容ios需要注意的地方

downloaFile 方法配置filePath路径

downloadFile的返回参数res中,取 res.filePath来用而不是res.tempFilePath

openDocument 设置 flieTypefilePath 

 

以上方法可以下载常见图片/office 文档。其他类型文件兼容性不做参考。

 

 

地址:https://www.leftso.com/article/2405132014377411.html

相关阅读

腾讯云对象存储,配置微信小程序可以访问 如上图Referer第一行所示,添加该域名即可,微信小程序都是通过这个域名来访问的资源。
针对ios手机,wx.downloadFile方法要设置filePath,指定文件下载后存储的路径 (本地路径), 才可预览文件// 下载Component({
组件仓库GitHub-icindy/wxParse:wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析配置显示解析二维码<templatename="wxP...
情况说明后端提供的接口返回的二进制流,且是post方法实现代码wx.request({url:'接口地址',method:'post',header:{"token":'后端接口需要的token...
下载小左图工【小左图工】下载先去下载小左图工,目前小左图工软件发布通过exe文件加exe文件的md5打zip包发布,下载下来是一个名为【小左图工.v1.5.2.zip】的压缩包,解压后如下:小左...
问题描述微信小程序canvas.createImage创建的图片请求头中没有referer字段导致cdn防盗链图片无法访问解决办法先用wx.getImageInfo方法获取图片,返回的path记...
某些情况下我们需要使用多个微信,需要在PC上多开微信,下面具体介绍Windows 10 操作系统上如何多开微信1.获取微信的安装路径找到桌面安装的微信快捷方式,然后数表右键属性查看微信的安装路径...
登录微信支付https://pay.weixin.qq.com/打开上面地址管理员微信扫码登录申请电子凭证下载顶部菜单选择【交易中心】左侧菜单拉到底部,选择电子凭证如上图所示,选择一个结算日期范...
1.开通商户号 登录 https://pay.wexin.qq.com 注册并开通商户号。 2.开通【微信收款码商业版】 https://pay.wexin.qq.com 打开...