Vue文件下载

后端返回文件流前端下载

请求方式axios

this.$axios({
   url: "/api/xxxxx/xxx/xxxxx/downloadAuto",
   method: "get",
   responseType: 'blob', // 表明返回服务器返回的数据类型
   headers: {
       'Content-Type': 'application/json',
       "Content-Disposition": "attachment"
   },
   params: {}
}).then(res => {
   let _this = this
   let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
   //通过FileReader读取数据
   var reader = new FileReader();
   reader.readAsText(blob, 'utf8');
   reader.onload = function() {
       if (this.result === '生成失败') {
           _this.$message.error(this.result)
       }else {
          const contentDisposition = res.headers['content-disposition'];
          let fileName = "" // 从文件头里获取文件名称
          if (contentDisposition) {
            fileName = contentDisposition.split('filename=utf-8')[1];
          }
          const link = document.createElement('a');
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = decodeURI(fileName); 
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
       }
   }
})

注意点：

1. axios封装过的话获取不到fileName所以在接收拦截器单独判断返回

service.interceptors.response.use((response) => {
    const res = response.data
    if (response.request.responseType === 'blob') { // 判断是不是文件下载接口
		return Promise.resolve(response);
	}
    return res
}, err)

2. content-disposition需要后端设置，如果文件名是中文的话会乱码所以需要后端用utf-8编码一下，前端用decodeURI解码得到文件名；