前端实现文件的下载

1.如果后端接口生成下载连接

export default function download(url, filename) {
  console.log('common download')
  getBlob(url, (blob) => {
    saveAs(blob, filename)
  })
}

function getBlob(url, cb) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'
  xhr.onload = () => {
    if (xhr.status === 200) {
      cb(xhr.response)
    }
  }
  xhr.send()
}

function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename)
  } else {
    var link = document.createElement('a')
    var body = document.querySelector('body')
    link.href = window.URL.createObjectURL(blob)
    link.download = filename
    // fix Firefox
    link.style.display = 'none'
    body.appendChild(link)
    link.click()
    body.removeChild(link)
    window.URL.revokeObjectURL(link.href)
  }
}

2.如果后端接口生成文件流

export const downloadFile = function({ url, data, method, filename }) {
  const token = getToken()
  request({
    url: url,
    method: method,
    data: data,
    responseType: 'blob',
    headers: {
      Authorization: 'Bearer ' + token,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [
      (data) => {
        let ret = ''
        for (const it in data) {
          ret +=
            encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }
    ]
  }).then((res) => {
    const fileName =
      window.decodeURI(
        filename + '.xlsx' || res.headers['content-disposition'].split('=')[1]
      ) || '文件导出.xlsx'
    if (res) {
      const blob = new Blob([res], { type: 'charset=utf-8' })
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象0
      document.body.removeChild(elink)
    }
  })
}