H5 文件流下载

以xhr为例，如果是使用axios的话记得设置responseType: 'blob',

export function downloadFile(url, token, name) {
  var xhr = new XMLHttpRequest()
  xhr.open('get', url, true)
  if (token) {
    xhr.setRequestHeader('token', token) //设置请求头
  }
  xhr.responseType = 'blob'; // 返回类型blob  blob 存储着大量的二进制数据
  xhr.onload = function () {
    if (this.status === 200) {
      var FileName = name || this.getResponseHeader('File-Name') //从请求头中获取文件名,前提是后端有开放这个给你
      var blob = this.response
      var reader = new FileReader()
      reader.readAsDataURL(blob) // 转换为base64，可以直接放入a标签href
      reader.onload = function (e) {
        var a = document.createElement('a') // 转换完成，创建一个a标签用于下载
        a.download = FileName
        a.style.display = 'none';
        a.href = e.target.result
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      };
    }
  }
  xhr.send() // 发送ajax请求
}

使用

import { downloadFile } from "./js/download";
downloadFile("请求地址","请求头token","文件名字，不写的话为后端设置的文件名");