vue项目点击下载功能

最新推荐文章于 2024-05-23 16:48:11 发布

weixin_54931571

最新推荐文章于 2024-05-23 16:48:11 发布

阅读量242

点赞数

文章标签： XMLHttpRequest GET请求文件下载 Blob URL.createObjectURL

本文链接：https://blog.csdn.net/weixin_54931571/article/details/120507929

版权

记录一下项目中用到的下载文件功能

upload(val){
      console.log(val)
      var params = this.header
      let xhr = new XMLHttpRequest();
      xhr.open('GET',process.env.VUE_APP_BASE_API+"/api/otaPackage/"+val.id.id+'/download', true);
      xhr.setRequestHeader("token", 'Bearer '+window.sessionStorage.getItem('token'));
      xhr.responseType = 'blob';
      xhr.onload = function (e) {
        //如果请求执行成功
        if (this.status == 200) {
          let blob2 = this.response;
          console.log(blob2);
          let filename = val.fileName;//如123.xls
          console.log(filename);
          let a = document.createElement('a');
          // blob2.type = "application/octet-stream";
          //创键临时url对象
          let url = URL.createObjectURL(blob2);
          a.href = url;
          a.download=filename;
          a.click();
          //释放之前创建的URL对象
          window.URL.revokeObjectURL(url);
        }
      };
      xhr.send();
    },