当前位置: 移动技术网 > IT编程>脚本编程>vue.js > 请求返回文件流格式,实现下载文件功能,前端代码

请求返回文件流格式,实现下载文件功能,前端代码

2020年07月17日  | 移动技术网IT编程  | 我要评论
let _this = this var xhr = new XMLHttpRequest(); let link = process.env.VUE_APP_BASE_API+'/gbgl/downloadDoclist' xhr.open('POST', link, true); // 也可用POST方式 xhr.responseType = "blob"; xhr.onload = function () { ...

      let _this = this
      var xhr = new XMLHttpRequest();
      let link = process.env.VUE_APP_BASE_API+'/gbgl/downloadDoclist'
      xhr.open('POST', link, true);    // 也可用POST方式
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status === 200) {
          var blob = this.response;
          let fr = new FileReader()
          fr.readAsText(blob)
          fr.onload = (e)=>{
            let result = fr.result
            try{
              let msg = JSON.parse(result)
              _this.$message.error(msg.message)
            } catch(e){
              if (navigator.msSaveBlob == null) {
                var a = document.createElement('a');
                var headerName = xhr.getResponseHeader("Content-disposition");
                // console.log(headerName)
                var fileName = decodeURIComponent(headerName)
                if(fileName.indexOf('"')!=-1){
                  fileName = fileName ? fileName.split('filename="')[1] : '下载文件'
                  fileName = fileName ? fileName.split('"')[0]:'下载文件';
                } else {
                  fileName = fileName ? fileName.split('filename=')[1] : '下载文件'
                }
                a.download = fileName;
                a.href = URL.createObjectURL(blob);
                document.body.appendChild(a)
                a.click();
                URL.revokeObjectURL(a.href);
                a.remove();
                _this.$message({type:'success',message:'导出成功!'})
              } else {
                  navigator.msSaveBlob(blob, fileName);
              }
            }
          }
        } else {
          _this.$message({type:'error',message:this.statusText})
        }
      };
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
      xhr.setRequestHeader("token", getToken());
      let query = this.$copy(this.dataForm)
      query.degrees = query.degrees.filter(e=>e.degreeIds||e.educationBackgroundIds)
      query.cadres = this.cadres
      xhr.send(this.$http.adornData(query))

 

本文地址:https://blog.csdn.net/RubyLinT/article/details/107379425

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网