vue Excel流文件下载接口乱码问题及解决方法

最近用vue需要接后台Excel流文件下载的接口，一路遇见的问题记录一下

问题一：get请求方式，postman测试用json格式传参数方式能测通下载文件但使用params放参数接口连接报400问题

解决方式：不算实质找到问题，最后将接口更改为了post请问方式，可能猜想因我的参数为字符串且字符串内含有特殊字符，以get明文传参方式识别出现了问题（如有解决求大佬告知）

问题二：接口连通，但返回的流和头部显示乱码

解决方式：添加一行代码即可

responseType: 'blob'

问题三：返回值未显示，下载无效果

解决方式：因前台设置了接口路径和返回必须带code要求，做了接口拦截，然而文件下载接口没有返回code，所以被拦截没有返回值，增加该返回路径在白名单中即可，代码如下：

// respone拦截器
service.interceptors.response.use(
  response => {
    const notice =response.config
    const res = response.data;
      // 设置拦截白名单
    if (res.code === '0000'||url =='image-table/code'||url=='image-table/login'||url=='healthy-api/riskAssess/download'||url=='healthy-api/diabetesRankDownload'||url=='healthy-api/drugRecommend/download') {
      return res;
    } else if (res.code ==='1003'||res.code ==='2001') {
      MessageBox.alert('您的登录已过期或失效,即将为您跳转登录页...','登录过期提示',{
        confirmButtonText: '确定',
        callback: action => {
          store.dispatch('FedLogOut').then(() => {
            location.reload()// 为了重新实例化vue-router对象 避免bug
          });
            // this.$router.push('/login')//暂时跳转到登录页面
        }
      });
      return Promise.reject("未登录")
    } else {
      Message({
        message: res.msg,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject(res)
    }
  },
  error => {
    window.console.error('err' + error)// for debug
    if(url!='dmp-api/notice/noticeCount'){
    Message({
      message: "网络链接错误",
      type: 'error',
      duration: 2 * 1000
    })
    return Promise.reject(error)
    }
  }
)

问题四：文件下载成功但下载文件名为乱码

解决方式：更改了文件下载方式，可自定义下载文件名，代码如下：

方法一：不能自定义文件名的下载文件方式

注意：1.type的格式为 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 下载excel为xlsx格式，格式为application/vnd.ms-excel 下载格式为xls，根据自己需求选择。

           2.我这个接口返回的res无需在从data中取值，如需要可将该行代码修改为：

              let blob = new Blob([res.data], {type: "application/vnd.ms-excel "});

downLoadFile(){
     this.api({
          url:"healthy-api/riskAssess/download",
          method:"post",
          responseType: 'blob',
          data:{
             username:getUser(),
             app_id:getAppName(),
             gender:this.sexDown,
             ages:this.agesDown
          },
        }).then(res =>{
//application/vnd.openxmlformats-officedocument.spreadsheetml.sheet下载excel为xlsx格式
//application/vnd.ms-excel下载格式为xls
          let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
          let url = window.URL.createObjectURL(blob);
          window.location.href = url;
          this.$message({
               showClose: true,
               message: '文件下载成功',
               type: 'success'
          });
       })
  },

方式二：下载文件可自定义文件名和文件后缀类型，代码如下：

注意：修改文件名和文件类型很清晰如下代码，此法是设置一个隐藏的a标签链接方式，亲测真实有效

downLoadFile(){
    this.api({
         url:"healthy-api/riskAssess/download",
         method:"post",
         responseType: 'blob',
         data:{
             username:getUser(),
             app_id:getAppName(),
             gender:this.sexDown,
             ages:this.agesDown
           },
       }).then(res =>{
          var filename = '高危人群风险评估结果';
          let url = window.URL.createObjectURL(res)
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', filename + '.xlsx')
          document.body.appendChild(link)
          link.click()
                   
          this.$message({
               showClose: true,
               message: '文件下载成功',
                type: 'success'
           });
         })
    },

以上问题和方法都亲生实践，真实有效，希望对你有所帮助，也给自己提醒！