Macro Da

每天学一点,成长多一点!

微信小程序下载附件处理方法

新建download.js文件放在utils目录,在页面中引入这个js

// 模块对外暴露的接口
module.exports = {
  //保存文件
  saveFile(tempFilePath, fileName, content) {
    wx.getFileSystemManager().saveFile({
      tempFilePath: tempFilePath,
      filePath: wx.env.USER_DATA_PATH + '/' + fileName,
      success: function (res) {
        wx.showModal({
          showCancel: false,
          title: '保存成功',
          content: content + '已保存至“内部存储/tencent/MicroMsg/wxanewfiles/”的随机文件夹下(文件名:' + fileName + ')'
        })
      },
      fail: function (res) {
        wx.showToast({
          title: '保存失败:' + res.errMsg,
          icon: 'none',
          duration: 3000
        })
      }
    })
  },

  //下载文件
  downloadFile(url) {
    if (url != undefined && url != '') {
      var fileName = url.split('/').slice(-1); //获取文件名称
      const downloadTask = wx.downloadFile({
        url: url,
        success: function (fes) {
          wx.hideLoading();
          wx.showModal({
            title: '提示',
            content: '请选择保存或打开文件',
            cancelText: '保存',
            confirmText: '打开',
            success(res) {
              if (res.confirm) {
                //打开文件
                wx.openDocument({
                  filePath: fes.tempFilePath,
                  success: function (res) {
                    console.log('打开文档成功');
                  },
                  fail: function (res) {
                    //文件类型不支持,打开失败后自动保存文件
                    saveFile(fes.tempFilePath, fileName, '不支持的文件类型,')
                  }
                })
              } else if (res.cancel) {
                //保存文件
                saveFile(fes.tempFilePath, fileName, '文件')
              }
            }
          })
        },
        fail: function (res) {
          wx.hideLoading();
          wx.showToast({
            title: '下载失败:' + res.errMsg,
            icon: 'none',
            duration: 3000
          })
        }
      })
      downloadTask.onProgressUpdate((res) => {
        wx.showLoading({
          title: '已下载:' + res.progress + '%'
        })
      })
    }
  }
}

代码执行流程是:弹窗让用户选择打开是保存,选择打开则客户端尝试打开,打开失败则自动保存文件,保存文件目录是微信指定的随机文件夹,文件名保持原来一致。

在页面中使用示例:

//获取应用实例
const app = getApp();
var download = require('../utils/download.js');
Page({
  /**
   * 页面的初始数据 
   */ 
  data: {
    url: '/upload/file/2019012912.doc'  //附件下载地址
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //执行下载
    download.downloadFile(this.data.url);
  }
})

PS:附件下载地址可由wxml页面中的属性获取,看情况使用

点赞

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注