前端处理后端返回的excel文件流并下载

项目中遇到上传excel,后端写的接口是当重复上传相同信息的excel时会吐出excel二进制文件流，这种文件流需要前端下载供用户看。

首先后端的接口需要上传文件已formData形式上传
这里我用的el-upload组件，在http-request属性绑定函数会自动返回文件信息

 <el-upload
            class="upload-roster"
            ref="rosUpload"
            accept="*.xls,*.xlsx,*.csv"
            action=""
            :show-file-list="true"
            :before-upload="beforeUpload"
            :auto-upload="true"
            :on-error="handleError"
            :http-request="uploadRequest"
            :file-list="excelFileList"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
          >```

```javascript
uploadRequest(){
 const fileTypeList=[
        'application/vnd.ms-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      ]
      let type=fileTypeList.includes(file.file.type)
      if(!type){
        this.$message.error('上传失败，文件类型错误')
        this.excelFileList=[]
        return
      }
 		let fileObj = file.file // 相当于input里取得的files
      let param = new FormData() // FormData 对象
      param.append('file', fileObj) // 文件对象
      param.append('importFlag', 0) // 文件覆盖类型
	 let config = {
	        headers: {
					//这里和后端的相对应
	          "Content-Type": "application/vnd.ms-excel",
				  },
	      }
	this.$api.marketingTool.custManager
        .importStaffInfo(param, config,'blob')
        .then(res => {
          if(res.status==200){
            console.log('上传成功--------res-',res)
            this.$message.success(`${file.file.name}上传成功并导入`)
            this.importFileDrawer=false//关闭抽屉
            this.excelFileList=[]
            this.getList()//刷新列表
          }
        })
        .catch(err => {
          if(err){
            console.log('上传失败--------err-',err)
            this.excelFileList=[]
            this.$message.error(`${file.file.name}上传失败，原文件返回`)
            const fileName = file.file.name
            const contentType =
              'application/vnd.ms-excel'
	              // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
	            this.exportFile(err.data, contentType, fileName)
	          }
	          else{
	            this.$message.error(`错误`)
	          }
	        })
	    },
	}

这里我因为用的是封装的aixos,所以不能直观表达，但是请注意，如果你想让后端返回的excel文件流，那么你要修改请求体的headers和responseType如下（axios封装处）：

const $axios = axios.create({xxxx}）
export default {
  $axios,
  post(url, data, headers, responseType) {
    return $axios({
      method: 'post',
      url,
      data: data,
      headers,
      responseType: responseType, //用于文件上传接口的文件类型要求
    })
    }
  }```

调用接口地方文章开头的

```javascript
	let config = {
        headers: {
				//这里和后端的相对应
          "Content-Type": "application/vnd.ms-excel",
			  },
      }
        this.$api.marketingTool.custManager
        .importStaffInfo(param, config,'blob')

注意：你的headers中的ContentType必须要跟后端接口中的setContentType保持一致，我这里用的application/vnd.ms-excel。我之前尝试过类型传application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，让后端setContentType一并修改为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，但是调试发现不可行，原因不明，可能因为我用的wps有关

注意求请求体中headers和responseType是平级关系，不能将responseType：'blob’写入headers内