关于 小程序的文件下载及预览功能

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

这篇文章是19年写的了，当时刚入职场，写一个文件预览功能就遇到坑了，所以记录了下。

当时解决问题最大的体会就是: 意识到平时看文档的重要性了，真的要平时没事就多看看文档了，对官方的API有个印象了，一旦遇到什么特殊的需求，才能更快速的找到解决方法

第一种情况 : 后端返回要预览的文件路径

对于这种 后端直接返回要下载预览的文件是个路径可采用下面的方法:

调用wx.downloadFile({})下载文件，在success回调中调用wx.saveFile({})把文件保存在本地，在再success回调中拿到返回的文件临时地址，用wx.openDocument({})打开预览.

wx.downloadFile({
    url: filepath,
    // url:"https://www. .../3468830325178368.pdf",
    success: function (res) {

      //保存文件到本地
      wx.saveFile({
        tempFilePath: res.tempFilePath,
        success(result) {
          var Path = result.savedFilePath
          //返回的文件临时地址，用于后面打开本地预览所用
          wx.openDocument({
            filePath: Path,
            success: function (res) {
              console.log('打开文档成功')
            }
          })
        },
        fail(res) {
          wx.showToast({
            icon: 'none',
            title: '下载失败'
          })
        }
      })
    }
  })

第二种情况 : 后端返回二进制流文件

对于二进制流文件，用以下方法:

用小程序原生的请求api，wx.request({})，在header中传入token，定义响应内容为二进制流形式responseType:'arraybuffer'，通过wx.getFileSystemManager().writeFile({})，将下载回来的data写在一个新建的本地文件中，写完后调用wx.openDocument({})实现预览功能，代码如下:

 wx.request({
    url: app.globalData.apiUrl + '/swh/prepareOrder/download/' + id,
    header: {
      wmpToken: wx.getStorageSync("wmpToken")
    },
    responseType:'arraybuffer',
    success: function(res) {
      var data = res.data 
      console.log(res,'111res')
      wx.getFileSystemManager().writeFile({
        filePath: `${wx.env.USER_DATA_PATH}/${purName + id}.pdf`,
        data:data,  
        success: function (rest){  
          console.log(rest, '111rest')
          wx.openDocument({
            filePath: `${wx.env.USER_DATA_PATH}/${purName + id}.pdf`,
            success: function (res) {
              console.log('打开文档成功')
            }
          })  
        },
        complete: function (rest) {
          console.log(rest, 'complete')
        },
      })
    }
  })

需要注意:

1. 代码中，${wx.env.USER_DATA_PATH}是小程序自带的文件系统用户目录路径，若在小程序开发助手上，下载的文件目录为:点击详情->文件系统->usr目录中;若在手机端上，则在tencent\MicroMsg\wxanewfiles\.....;
2. 另外，开发中还遇到一个小知识点，是文件下载下来之后打印出来，在开发助手上看是http://..........，用手机调试发现是wxFile://.......，不用太过纠结，这只是两种不同的协议.