在vue中进行导出操作

一、背景

    因公司需要，我需要在原有的代码上进行迭代操作，需要对导出进行权限过滤，header中添加token以及UID等一系列的参数用于拦截信息，但由于请求之前是使用的window.location.href="xxxxxx"进行的跳转下载，所以无法在此基础上进行头文件参数添加操作，并且之前并没有对get请求的参数进行统一处理

二、解决方法

    1、遇到这个问题我首先想到的就是使用ajax方法，在请求之前进行header参数的添加，话不多说我们开始写代码

    

    运行

    

    可以看出我们的请求是成功了，但是你会发现并没有excl表格被下载下来，后来发现是因为ajax在导出表格的时候是无法成功下载的，那我们换一种方式来进行下载，使用原生的ajax写一个类似form表单提交的方式

    2、

postExcelFile(param){
          var xhr ;
          if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
          }else{//code for IE6,IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          }
          //导出路径以及参数
          var url = exportDoubtForProvinceUrl(param) + "?resultId="+this.logId+"&uid="+this.$store.state.user.userId;
          console.info("url:" + url);
          //设置响应类型为blob类型
          xhr.responseType = "blob";
          //设置请求类型为get
          xhr.open("get", url, true);
          let uuid = UUID.createUUID();
          uuid = uuid.replace(/\-/g, '');
          //设置header参数  token
          xhr.setRequestHeader("token",uuid);
          //设置header参数  userid
          xhr.setRequestHeader("iscUserId",this.getIscUserId(uuid));

          console.info("iscUserId:" + this.getIscUserId());
          //onload是只有在执行的时候会起作用
          xhr.onload = function () {
            let result = true;     //默认接口调用失败
            let blob = xhr.response;  //xhr.response -->blob 数据源
            let fr = new FileReader(); //FileReader可以读取Blob内容
            fr.readAsText(blob); //二进制转换成text
            fr.onload = function (e) {  //转换完成后，调用onload方法
              result = fr.result;  //result 转换的结果
              console.info("返回数据：" + e);
            }
            //此处是用来区分后台的数据源是文件、图片流，还是我们的告警信息，（如果是告警信息，size会很短）
            if(blob.size < 200) {
              result = false;
            }
            if (result) {
              //获取响应文件流　　
              let blob = this.response;
              let reader = new FileReader();
              // 转换为base64，可以直接放入a表情href
              reader.readAsDataURL(blob);
              reader.onload = function (e) {
                //解决浏览器兼容性问题
                let objectUrl = window.URL.createObjectURL(blob);

                // 转换完成，创建一个a标签用于下载
                let a = document.createElement('a');
                
                a.href = objectUrl;
                a.download = '结果明细.xls';
                //a.click();    //一般到了这就可以了，但是火狐和google可能会有问题，需要下面的一步操作才可以下载成功，否则会下载下一个没有后缀名的文件

                // 修复浏览器中无法触发click
                $("body").append(a);
                a.click();
                $(a).remove();
              }
            }else{
              console.info("导出异常" + result.msg);
            }
          }
          xhr.send();
        },

    

    从括号里面的数值就知道我测试了多少次，这也是我从各大大佬的博客里面参考过来进行测试的结果