封装下载文件(后台返回二进制流)

66 阅读1分钟

第一步:新建文件

image.png

export default {
  // 下载 Excel 方法
  excel(data, fileName) {
    this.download0(data, fileName, 'application/vnd.ms-excel')
  },

  // 下载 Word 方法
  word(data, fileName) {
    this.download0(data, fileName, 'application/msword')
  },

  // 下载 Zip 方法
  zip(data, fileName) {
    this.download0(data, fileName, 'application/zip')
  },

  // 下载 Html 方法
  html(data, fileName) {
    this.download0(data, fileName, 'text/html')
  },

  // 下载 Markdown 方法
  markdown(data, fileName) {
    this.download0(data, fileName, 'text/markdown')
  },
  // 下载pdf方法
  pdf(data, fileName) {
    this.download0(data, fileName, 'application/pdf')
  },

  download0(data, fileName, mineType) {
    // 创建 blob
    let blob = new Blob([data], { type: mineType })
    // 创建 href 超链接,点击进行下载
    window.URL = window.URL || window.webkitURL
    let href = URL.createObjectURL(blob)
    let downA = document.createElement('a')
    downA.href = href
    downA.download = fileName
    downA.click()
    // 销毁超连接
    window.URL.revokeObjectURL(href)
  },
}

第二步。在main.js全局引入

image.png

image.png 第三步 接口定义

export function getAdmissionMaterialsDownload(query) {
  return request({
    url: '/bpm/employ/admission/admissionMaterialsDownload',
    method: 'get',
    responseType: 'blob',
    params: query,
  })
}

第四步使用

let result = await getAdmissionMaterialsDownload({ id: item.id })
        this.$download.zip(result, item.name + '入场资料.zip')