微信小程序 - 下载文件到本地、打开文档

前言

需求场景描述:接口获取到服务器的文件地址,然后在小程序中下载文件到本地手机上。根据文件格式,下载类型分为下面四种情况:

  • 下载图片到本地
  • 下载视频到本地
  • 打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx
  • 下载音频到本地,以及其他格式文件

实现

  • 下载图片到相册:saveImageToPhotosAlbum()
  • 下载视频到相册:saveVideoToPhotosAlbum()
  • 打开文档:openDocument()
  • 下载音频到本地:FileSystemManager文件管理器、替代方案。

具体演示代码

1、下载图片到本地

onSavePic() {
  // #ifdef MP-WEIXIN
  uni.getImageInfo({
    src: _this.imageUrl, // 图片下载网络地址
    success: function(e) {
      // e.type=png/jpg 扩展名
      // filePathNew: 指定文件下载后存储的路径 (本地路径)
      var filePathNew = wx.env.USER_DATA_PATH + "/" + new Date().valueOf() +'.'+e.type; 
      uni.downloadFile({
        url: _this.imageUrl, 
        filePath: filePathNew,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: filePathNew,
              success: function() {
                uni.showToast({title: '保存到相册成功'});
              },
              fail: function(err){}
            });
          }
        }
      });
    },
    complete: function(e) {}
  });
  // #endif
},

2、下载视频到本地

实现方法同下载图片,只不过保存视频需要使用saveVideoToPhotosAlbum()方法。

onSaveVideo() {
  // #ifdef MP-WEIXIN
  uni.downloadFile({
    url: this.videoUrl, 
    success: (data) => {
      if (data.statusCode === 200) {
        uni.saveFile({
          tempFilePath: data.tempFilePath, //临时路径
          success: function(res) {
            uni.saveVideoToPhotosAlbum({
              filePath: res.savedFilePath,
              success:function(){
                uni.hideLoading()
                uni.showToast({title:"保存到相册成功"})
              }
            })
          }
        });
      }
    },
    fail: (err) => {
      uni.showToast({title: '失败请重新下载'});
    },
  });
  // #endif
},

3、打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx

onOpenDocment() {
  uni.downloadFile({
    url: this.fileUrl,// 网络文档地址
    success: (data) => {
    if (data.statusCode === 200) {
        uni.saveFile({
          tempFilePath: data.tempFilePath, //临时路径
          success: function(res) {
            // 保存路径
            uni.showToast({ title: "文件已保存:"+res.savedFilePath,duration:3000 })
            setTimeout(()=>{
              //打开文档查看
              uni.openDocument({
                filePath:res.savedFilePath,
                success:function(res){
                  console.log('打开文档成功')
                }
              })
            }, 3000);
          }
        });
      }
    },
    fail: (err) => {
      uni.showToast({
        title: '失败请重新下载'
      });
    },
  });
},

4、下载音频。

因微信平台限制,除了视频、图片支持下载文件到本地,以及部分文档格式支持直接打开,其他格式的文件不支持下载文件到本地。

微信小程序官网中,提到可以使用FileSystemManager文件管理器下载音频等其他格式文件。

使用FileSystemManager文件管理器下载文件,

文件主要分为两大类:

  • 代码包文件:代码包文件指的是在项目目录中添加的文件。
  • 本地文件:通过调用接口本地产生,或通过网络下载下来,存储到本地的文件。

其中本地文件又分为三种:

  1. 本地临时文件:临时产生,随时会被回收的文件。运行时最多存储 4GB,结束运行后,如果已使用超过 2GB,会以文件为维度按照最近使用时间从远到近进行清理至少于2GB。
  2. 本地缓存文件:小程序通过接口把本地临时文件缓存后产生的文件,不能自定义目录和文件名。跟本地用户文件共计,小程序(含小游戏)最多可存储 200MB。
  3. 本地用户文件:小程序通过接口把本地临时文件缓存后产生的文件,允许自定义目录和文件名。跟本地缓存文件共计,小程序(含小游戏)最多可存储 200MB。

本地用户文件:提供了一个用户文件目录给开发者,开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。解析到手机上的路径为,wxfile://usr/,真实路径:手机/内部存储/tencent/MicroMsg/wxanewfiles/xxxx/abc.mp3。

xxxx:是一个很长的由英文数字组成的文件夹,这个文件夹的明明规则,尚不清楚。所以保存后的文件具体在什么路径,并不知道。而且苹果手机,无法获取到微信内部的文件路径。因此这种方式pass。

要想实现下载音频的功能,就只能找替代方案。

方案1:下载文件保存为图片格式,保存成功后,更改扩展名。实现步骤如下:

①使用wx.downloadFile下载mp3文件后,使用FileSystemManager.save保存mp3文件为图片格式。

②保存成功后,再使用wx.saveImageToPhotosAlbum保存到相册,最后路径为:手机/内部存储/tencent/MicroMsg/WeiXin/mmexport1xxxxxx.jpg。1xxxxxx为时间戳,只能根据文件生成时间判断是哪个文件了。 

这种方式比较繁琐,对于用户不适用。pass

方案2:复制音频网络地址,打开系统浏览器,在浏览器中下载音频。亲测有效。

苹果手机
      ①、使用safari浏览器下载时,点击下方tab中的分享按钮,选择:‘存储到“文件”’选项,即可保存到手机的“文件”管理中。不支持重命名。
      ②、使用QQ浏览器,只可以在浏览器中播放音频,无法下载音频。

安卓手机
      ①、浏览器中打开链接,可直接进行下载,并支持重命名。

复制网络地址到剪切板方法如下:

// 下载音频到本地
onSaveAudio() {
  uniCopy({
    content:this.audioUrl,// 音频下载链接
    success:(res)=>{
      uni.showToast({title: res})
    },
    error:(e)=>{
      uni.showToast({title: e,})
    }
  })
},
uniCopy({content,success,error}) {
  if(!content) return error('复制的内容不能为空 !')
  content = typeof content === 'string' ? content : content.toString() // 复制内容,必须字符串,数字需要转换为字符串
  /**
   * 小程序端 和 app端的复制逻辑
   */
  //#ifndef H5
  uni.setClipboardData({
    data: content,
    success: function() {success("复制成功~")},
    fail:function(){success("复制失败~")}
  });
  //#endif
  
  /**
   * H5端的复制逻辑
   */
  // #ifdef H5
  if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断
    // 不支持
    error('浏览器不支持')
  }
  let textarea = document.createElement("textarea")
  textarea.value = content
  textarea.readOnly = "readOnly"
  document.body.appendChild(textarea)
  textarea.select() // 选择对象
  textarea.setSelectionRange(0, content.length) //核心
  let result = document.execCommand("copy") // 执行浏览器复制命令
  if(result){
    success("复制成功~")
  }else{
    error("复制失败,请检查h5中调用该方法的方式,是不是用户点击的方式调用的,如果不是请改为用户点击的方式触发该方法,因为h5中安全性,不能js直接调用!")
  }  
  textarea.remove()
  // #endif
},

5、下载其他格式文件。与下载音频类似,具体有时间再补充。

注意:

下载资源的地址,下载之前必须设置微信公众平台开发设置中的服务器域名的downloadFile合法域名。资源地址必须来自合法域名才可以请求。

微信小程序 - 下载文件到本地、打开文档_第1张图片

PS:图片、视频保存到相册需要获取权限方可保存,获取权限流程

PS:保存图片到相册出现*.unknown错误及saveImageToPhotosAlbum:fail invalid file type错误

你可能感兴趣的:(前端,微信小程序,uni-app,前端,微信小程序,小程序)