vue+iview 导出功能提示解析

最新推荐文章于 2023-03-07 13:34:55 发布

沐风拂千渔

最新推荐文章于 2023-03-07 13:34:55 发布

阅读量373

点赞数 1

分类专栏： Vue Js 功能文章标签： vue 导出功能二进制 blob FileReader

本文链接：https://blog.csdn.net/weixin_44794123/article/details/127005433

版权

Vue 同时被 3 个专栏收录

43 篇文章 1 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

功能

10 篇文章 0 订阅

订阅专栏

项目中，遇到一些报表问题，通常会涉及导入导出批量操作数据的功能。

本文简单总结一下：导出时频繁点击按钮时，导出失败或接口请求错误，如何解析接口返回的提示语。

FileReader读取解析错误信息

1.获取导出返回数据

 let  exportData=res.data;

2.创建FileReader对象，解析数据

 let reader = new FileReader();
 reader.readAsText(exportData);

3，调用FileReader方法onload解析处理请求结果

reader.onload = () => {}

4,type区分返回结果作处理

exportData.type判断，获取result中的信息

if (res.data.type === 'application/json') {
               let resData = JSON.parse(reader.result)
                 if (resData.success==false) {
                    this.$Message.error(resData.status.message);//错误提示(重复调用提示，例如：请点击慢一点);
                 }
}else{
//导出成功下载文件
}

5.详细代码

 exportFile(url, params){
      this.$axios.request({
        url,
        method: "post",
        responseType: "blob",
        data: params
      }).then(
        res =>{
        let reader = new FileReader();
        reader.readAsText(res.data);
        reader.onload = () => {
	      if (res.data.type === 'application/json') {
	      
	               let resData = JSON.parse(reader.result)
	                 if (resData.success==false) {
	                    this.$Message.error(resData.status.message);//错误提示(导出接口重复调用);
	                 }
	                 
	      }else {
	        if (res.status === 200) {
	        
	          let content = res.data
	          let blob = new Blob([content], {
	              type: "application/vnd.ms-excel;charset=utf-8"
	            });
            let url = URL.createObjectURL(blob);
            let a = document.createElement("a");
            let fileName = res.headers.filename;
            a.style.display = "none";
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            
	        }else {
	              this.$Message.error("下载失败");
	        }
      }
   }
       },
      ).catch((res) => {
          this.$Message.error("请求失败");
        });
    },

这样就可以解析提示出后端接口返回的错误信息，避免客户频繁点击导致高并发，
导致接口挂掉，影响体验。