关于前端文件下载各类方式大汇总

<a href="test.zip" rel="external nofollow"  download="test.zip">download</a>

window.location.href = '你的 url';
// 或 
window.open('你的 url');

export function downloadApi() {
  return request({
    url: '/testApi',
    method: 'get',
    responseType: 'blob'
  })
}

    // vue 代码
    downClick () {
      downloadApi().then(resBlob => {
        this._download(resBlob)
      })
    },
    _downloads (resBlob) {
      const projectName = '项目.zip'
      // IE|Edge
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(resBlob, projectName)
      } else {
        // 其他浏览器
        const blobUrl = window.URL.createObjectURL(resBlob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.download = projectName
        a.href = blobUrl
        document.body.appendChild(a) // 兼容火狐
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(blobUrl)
      }
    },

    downClick () {
      downloadApi().then(async resBlob => {
        let resObj = {}
        if (resBlob.size == 0) {
          // 没有数据可导出
        } else if (resBlob.type == 'application/json') {
          // 返回(错误)信息
          resObj = await (new Response(resBlob)).text()
          // 得到错误信息
          resObj = JSON.parse(resObj)
        }
        // ... 相关判断处理
        this._download(resBlob)
      })
    },

    downClick () {
      downloadApi().then(resBlob => {
        let resObj = {}
        if (resBlob.size == 0) {
          // 没有数据可导出
        } else if (resBlob.type == 'application/json') {
          // 返回(错误)信息
          const reader = new FileReader()
          reader.addEventListener('loadend', () => {
            // reader.result 包含被转化为一个字符串内容的 blob
            resObj = JSON.parse(reader.result)
            if (/* 是错误信息 */) {
              // 相关判断处理
            }
          })
          reader.readAsText(resBlob)
        } else {
          this._download(resBlob)
        }
      })
    },

  /**
   * 使用 form-data -post 方式导出文件
   * @param url 导出地址
   * @param params 参数
   */
  const postFormDataFile = (url, params) => {
    const form = document.createElement('form')
    form.style.display = 'none'
    form.action = BASE_URL + url
    form.method = 'post'
    document.body.appendChild(form)
    // 动态创建 input 并给 value 赋值
    for (const key in params) {
      const input = document.createElement('input')
      input.type = 'hidden'
      input.name = key
      input.value = params[key]
      form.appendChild(input)
    }
    form.submit()
    form.remove()
  }

export function downloadProject(projectId) {
  return request({
    url: downloadProjectUrl + projectId,
    method: 'get',
    responseType: 'blob',
    onDownloadProgress: function (event) {
      // 注意: 后端需要设置响应头 Content-Length, 否则 event.lengthComputable 就会为 false, event.total 为 0
      // event.loaded 得到当前已加载的数据大小, event.total 拿到总的数据大小, 通过两者的比值就知道其进度。
      console.log('event', event)
    }
  })
}