vue处理后端导出接口(后端返回的是文件流)

废话不说上代码,直接把下方代码CV到你的导出按钮的逻辑就可以

如果需要修改下载后的文件名字跟格式,修改fileName就可以,提示信息我用的是element,可以自行更换其他

this.$http({
        method: "post",
        responseType: "blob", //防止返回乱码
        url: "/api/huilan-accommodation/stayInfomation/exportExcel",
      }).then((res) => {
        // console.log(res);
        if (res.status == "200") {
          // downloadFile (data, name)
          let data = res.data;
          if (!data) {
            this.$message.error("下载失败，解析数据为空！");
            return;
          }
          const datetime = Date.now();
          // 创建一个新的url，此url指向新建的Blob对象
          let url = window.URL.createObjectURL(new Blob([data]));
          // 创建a标签，并隐藏改a标签
          let link = document.createElement("a");
          link.style.display = "none";
          // a标签的href属性指定下载链接
          link.href = url;
          //setAttribute() 方法添加指定的属性，并为其赋指定的值。
          let fileName = datetime + ".xls";
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
          this.$message.info("导出成功");
        } else {
          this.$message.error("导出失败，请尝试重新导出");
        }
      });