vue原生js利用xhr异步下载文件

 导出


 downLoadd() {

      let that = this;

      var xhr = new XMLHttpRequest();

      xhr.open(

        "post",

        that.$Config.download + "/" + that.warehouseId + "/" + that.regTime,

        true

      );

      xhr.responseType = "blob"; // 返回类型blob

      xhr.setRequestHeader("Content-Type", "application/json"); //设置提交的数据为json格式

      //多个setRequestHeader合并为一个

      xhr.setRequestHeader("token", that.token);

      xhr.onload = function() {

        // 请求完成,数据接收完毕

        // console.log("打印",this.status)

        console.log("this", this);

        console.log("xhr", xhr);

        if (this.status === 200) {

          // 返回200

          var blob = this.response;

          // 设置文件名

          console.log(xhr.getResponseHeader("content-disposition"));

          let temp = xhr

            .getResponseHeader("content-disposition")

            .split(";")[1]

            .split("filename=")[1];

          var fileName = decodeURIComponent(temp);

          var reader = new FileReader();

          reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href---URL以base64编码的字符串表示文件的数据。

          reader.onload = function(e) {

            // 转换完成,创建一个a标签用于下载

            var a = document.createElement("a");

            a.download = fileName;//指定文件名

            a.href = e.target.result;

            $("body").append(a); // 修复firefox中无法触发click

            a.click();

            $(a).remove();

          };

        } else {

          alert("文件下载失败,请稍后再试");

        }

      };

      xhr.send();

    },

你可能感兴趣的:(vue原生js利用xhr异步下载文件)