前端调用后端接口导出excel, 并解决导出失败转化blob失败类型消息

最新推荐文章于 2024-07-30 09:30:00 发布

Arvin-wm

最新推荐文章于 2024-07-30 09:30:00 发布

阅读量3.2k

点赞数 2

分类专栏： vue-个人杂记

本文链接：https://blog.csdn.net/weixin_44754351/article/details/107151982

版权

vue-个人杂记专栏收录该内容

27 篇文章 1 订阅

订阅专栏

接口API:

   P -- 传参，responseType:'blob' -- 设置导出类型为 blob,  timeout: 600000 -- 单独设置导出时间
   export const putinDetailexport = P => post(V1+'/materialOrder/selected/export', P,{responseType:'blob'},{timeout: 600000})

业务代码:

// 导出新接口
      handleExportNew(){
	        this.$store.dispatch(this.ACTIONS.EXPORTNEW, { ...this.putInForm },{ responseType: "blob" }).then(result => {
		          if(result){
			            let blob = new Blob([result], { type: "application/vnd.ms-excel" });
			            const link = document.createElement("a");
			            let fileName = decodeURIComponent("入库信息.xls");    ----- **这里加后缀 .xls 是因为有些浏览器 下载后没有类型导致打不开**
			            var url = window.URL.createObjectURL(blob);
			            link.style.display = "none";
			            link.href = url;
			            link.setAttribute("download", fileName);
			            document.body.appendChild(link);
			            link.click();
			            document.body.removeChild(link);
			            //  清空勾选
			            this.$refs.multipleAssets.clearSelection();
		          }
	        })
      },

拦截器处理错误消息: – 要处理的原因是因为导出操作失败接口将信息转成blob类型，导致不能获取错误信息

// 添加响应拦截器
request.interceptors.response.use(function (response) {
        loading.close()
        if(!response.data.rows){
            response.data['rows'] = []
        }
        if(!response.data.data){
            response.data['data'] = {}
        }
        return response
  }, function (error) {
        loading.close()
        if(error.message.indexOf('timeout') !== -1) {
              Message.error({message: '网络延迟,请求超时,请再次尝试！'})
        } else if(error.response.status === 400){
              if(error.response.data.code == 1001){
                store.commit('count',true)  // 当1001 需要弹框提醒 资产上限
              }else {
              		--------这里开始处理 导出错误转化
                    if(error.response.config.responseType == 'blob'){   //解决 blob请求类型 错误信息
                        let blob = new Blob([error.response.data])
                        let reader = new FileReader()
                        reader.readAsText(blob,'utf-8')
                        reader.onload = function () {
                            try{
                                let data = JSON.parse(reader.result)
                                Message.error({message: data.message ||'操作有误,请重新操作!'})
                            }catch (e) {
                                Message.error({message: '系统错误请联系管理员'})
                            }
                        }
                     ---------- 结束
                    }else{
                        if(error.response.data.data){
                            return Promise.reject(error)
                        }else{
                            Message.error({message: error.response.data.message ||'操作有误,请重新操作!'})
                        }
                    }
              }
        } else if (error.response.status === 429){
              Message.error({message:'亲,当前用户有点多哦,请稍等几分钟！'})
        } else {
              Message.error({message: '系统错误请联系管理员'})
        }
        console.log(error)

  });