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

10 篇文章 0 订阅
6 篇文章 0 订阅

最近用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'
           });
         })
    },

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

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值