微信小程序中下载文件(非图片)方式总结

前言

总是有需求想在微信小程序里面做下载文件并保存的功能,所以自己整理了一下小程序涉及到下载api,大致理了下在小程序里面下载的流程和解决方案。

仔细看官方文档还是能看到这个“文件下载保存功能”不是我们正常想的下载文件到手机里面,随便可以分享的。

下面给出了方案一(使用转发文件API实现)与方案二(使用微信的下载加预览API实现)都经过线上验证使用,使用微信独特方式满足该需求。


一、涉及api

1.wx.saveFile()

​ 文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html

作用:保存文件到本地。

​注意:
1.该api调用的限制是下载文件最大为10m,且该接口已停止维护。
2.不支持保存后的文件转发,保存后的文件仅支持在小程序内使用。
3.保存的位置是在小程序缓存里面,开发者和用户不需要关心。

2.wx.downloadFile()

​ 文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

作用:下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径)。
注意:
单次下载允许的最大文件为 200MB。

3.wx.getFileSystemManager().saveFile()

文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.saveFile.html

作用:微信文件管理对象,保存临时文件到本地。
注意:
1.FileSystemManager是微信小程序文件管理器,通过 wx.getFileSystemManager 获取,saveFile()是它提供的一个方法

4.api总结

以上三个api都不能实现真正意义的下载保存,因为微信小程序提供的存储服务是以小程序和用户维度隔离的存储服务,所以下载下来之后用户并不能访问到自己下载的文件。做不到用户下载文件之后可以快捷的找到下载的文件。只是下载到微信app的缓存里面。且微信也不建议开发人员或用户去查询本地文件存储的路径。该结论官方文档也有具体说明:

image

 

二、方案一 使用转发文件API实现

使用转发文件API  》 wx.shareFileMessage

image

 示例代码:

  // callback 写法
  wx.downloadFile({
    url: URL, // 下载url
    success (res) {
      // 下载完成后转发
      wx.shareFileMessage({
        filePath: res.tempFilePath,
        success() {},
        fail: console.error,
      })
    },
    fail: console.error,
  })

  // async await 写法
  const { tempFilePath } = await wx.downloadFile({
    url: URL, // 下载url
  })
  // 下载完成后转发
  await wx.shareFileMessage({
    filePath: tempFilePath,
  })

效果就是下载完后直接打开微信选择聊天记录界面,选择某个聊天记录就将该文件发送过去了,就不截图了。

 p.s  解决使用uni.shareFileMessage与wx.shareFileMessage转发文件到好友,安卓手机不识别后缀问题, 苹果正常

image

 

原因:

首先这是因为我们使用downloadFile下载文件的时候,默认是保存至临时文件,返回的结果是临时路径,在这个临时路径中,IOS可以识别出来文件的后缀,而安卓不能识别。

image

 参数传入下载的URL,并且指定下载位置,使用微信文件配置wx.env.USER_DATA_PATH,后面可以自定义自己的路径,支持多层级,但是最后一级必须带文件后缀,你要下载的文件后缀是什么就写什么,必须带文件后缀。

image

 

image

在分享shareFileMessage的方法中,支持文件名fileName自定义。

这个fileName是什么 发送到聊天就是什么。

image

 

三、方案二 使用微信的下载加预览API实现

​ 先使用下载文件api把文件下载下来,再使用wx.openDocument() 打开文件里面加上showMenu字段,然后就可以看到在打开的文件右上角出现了···

​ ios表现:ios点击之后会有发送给朋友的选项,选择分享给朋友之后就可以把文件直接发送给对方了,然后你就可以在聊天记录里面拿到这个文件;

​ 安卓表现:安卓手机里面有保存文件的选项;

缺陷:不能 “下载”后直接选择某个文件发给其他人,这个方案每次想发送必须先上小程序找到该文件,下载打开文件再去转发(而且必须是微信好友);或者在之前转发的聊天记录里面找到该文件。

注意:openDocument预览API支持的文件类型有限 目前仅支持Doc, xls, ppt, pdf, docx, xlsx, pptx

P.S:如果遇到IOS 无法预览,请使用临时路径,指定路径它不支持。下面示例使用的是临时路径,安卓与IOS均正常

downloadFileOpen(){
   let link = 'https://www.gjtool.cn/pdfh5/git.pdf'
   //下载文件
   wx.downloadFile({
     url: link,
     success (res) {
       if (res.statusCode === 200) {
           const filePath = res.tempFilePath
           wx.openDocument({
             filePath: filePath,
         fileType: 'pdf',     showMenu:
true, //关键点     success: function (res) {     console.log('打开文档成功')     }     })   }   } }) }

安卓具体表现:

image

ios具体表现:

image

 

posted @ 2025-11-11 16:32  当下是吾  阅读(27)  评论(0)    收藏  举报