vue--前端接收后台传过来的excel文件数据

最近项目要实现把前端展示的列表导出功能，但是接口是post请求，无奈之前做的get请求不能复用。上网开了一下帖子基本是用blob实现下载，以下是我的代码：

index.vue

         
api.pageCzZlxx(params).then((res) => {
          var blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // type这里表示xlsx类型
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = '出账申请列表.xls' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
})

我这里后台直接再res里返回，所以不需要res.data获取 

request.js

service.interceptors.request.use(config => { // 配置axios请求拦截器
  const token = sessionStorage.getItem('token')

  if (token) {
    config.headers = {
      'token': token, // 在请求头中添加token参数Auth-Code
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' // 在请求头中添加其它参数
    }
  } else {
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 在请求头中添加其它参数
  }
  console.log(config, 'config')

  if (config.data && config.data._requestType) {
    config.headers['Content-Type'] = 'application/json'
  } else {
    config.data = qs.stringify(config.data)
  }
  if (config.data && (config.data.exportData == 3 || config.data.exportData == 1)) {
    config['responseType'] = 'blob' // 在请求头中添加其它参数   看清楚一定要把responseType跟headers同层级
  }

  return config
}, error => {
  console.log(error)

  return Promise.reject(error) // 返回一个带有拒绝reason的Promise请求
})

在请求头中添加其它参数   看清楚一定要把responseType：‘blob’跟headers同层级。

看到返回这个的时候就说明请求成功。我这里导出excel,所以传type: "application/vnd.ms-excel"

亲测可以，顺便记录下，也希望能帮助到需要的朋友，如果有什么不对的地方，望大神在下面指正。