前端文件流下载

一、在vux中使用了 Axios 后，后端返回来的是文件流 这里我们可以直接用 Axios 方法返回的 res 赋值到 blob

需要注意和后端发起请求的时候 responseType 需要是 ‘blob’

		const blob = res
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = function (ev) {
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容ie11
            const blobObject = new Blob([blob])
            window.navigator.msSaveOrOpenBlob(blobObject, '文件名称.xlsx')
          } else {
            const url = URL.createObjectURL(new Blob([blob]))
            const a = document.createElement('a')
            document.body.appendChild(a) // 此处增加了将创建的添加到body当中
            a.href = url
            a.download = '文件名称名称.xlsx'
            a.target = '_blank'
            a.click()
            a.remove() // 将a标签移除
          }
        }

二、使用原生的 XMLHttpRequest 文件流下载

1. xhr.setRequestHeader(‘token’,‘token’); // 在headers加参方法

var url = ‘请求接口链接’
const xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.responseType = 'blob'
        xhr.onload = function () {
          const blob = xhr.response
          const reader = new FileReader()
          reader.readAsDataURL(blob)
          reader.onload = function (ev) {
              if(window.navigator.msSaveOrOpenBlob){
                // 兼容ie11
                let blobObject = new Blob([blob]);
                window.navigator.msSaveOrOpenBlob(blobObject, '文件名称名称.xlsx');
              }else{
                let url = URL.createObjectURL(new Blob([blob]));
                let a = document.createElement('a');
                document.body.appendChild(a); //此处增加了将创建的添加到body当中
                a.href = url;
                a.download = '文件名称名称.xlsx';
                a.target = '_blank';
                a.click();
                a.remove(); //将a标签移除
              }
          }
        }
        xhr.onerror = function () {
          console.error('could not download file')
        }
        xhr.send()