导出,responseType: “blob“,blob流导出

post方法

      if (this.TableOptions.selectedRows.length == 0) {
        this.$message({
          type: "warning",
          message: "请勾选下方表格中需要导出的数据",
        });
        return false;
      }
      this.$confirm("确定要进行导出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let headerToken = localStorage.getItem("systoken");
        this.$axios
          .post(
            "/api/sysUser/exportData.json",
            {
              level: this.optionLevel,
              name: this.form.name,
              idCard: this.form.idCard,
              phone: this.form.phone,
            },
            {
              headers: { token: headerToken },
              responseType: "blob",
            }
          )
          .then((response) => {
            if (response.headers["content-disposition"]) {
              const content = response.data;
              const blob = new Blob([content]); //构造一个blob对象来处理数据

              // fileName必用这种方式进行解析,否则乱码
              // Server.UrlEncode(filename);

              let contentDisposition = response.headers["content-disposition"];
              // fileName必用这种方式进行解析,否则乱码
              let fileName = window.decodeURI(
                contentDisposition.substring(
                  contentDisposition.indexOf("=") + 1
                )
              );
              //对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
              if ("download" in document.createElement("a")) {
                const link = document.createElement("a"); //创建a标签
                link.download = fileName; //a标签添加属性
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                document.body.appendChild(link);
                link.click(); //执行下载
                URL.revokeObjectURL(link.href); //释放url
                document.body.removeChild(link); //释放标签
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      });

get请求

download() {
      if (this.TableOptions.selectedRows.length == 0) {
        this.$message({
          type: "error",
          message: "请勾选下方表格中的数据",
        });
      }
      if (this.TableOptions.selectedRows.length == 1) {
        var ids = "";
        this.TableOptions.selectedRows.forEach((key) => {
          ids = key.id;
        });
        this.$confirm("确定要进行导出吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let headerToken = localStorage.getItem("systoken");
          let header = {
            token: headerToken,
          };
          this.$axios
            .get("/api/taskMain/exportTask", {
              params: { taskId: ids },
              headers: header,
              responseType: "blob",
            })
            .then((response) => {
              if (response.headers["content-disposition"]) {
                const content = response.data;
                const blob = new Blob([content]); //构造一个blob对象来处理数据

                // fileName必用这种方式进行解析,否则乱码
                // Server.UrlEncode(filename);

                let contentDisposition =
                  response.headers["content-disposition"];
                // fileName必用这种方式进行解析,否则乱码
                let fileName = window.decodeURI(
                  contentDisposition.substring(
                    contentDisposition.indexOf("=") + 1
                  )
                );
                //对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
                if ("download" in document.createElement("a")) {
                  const link = document.createElement("a"); //创建a标签
                  link.download = fileName; //a标签添加属性
                  link.style.display = "none";
                  link.href = URL.createObjectURL(blob);
                  document.body.appendChild(link);
                  link.click(); //执行下载
                  URL.revokeObjectURL(link.href); //释放url
                  document.body.removeChild(link); //释放标签
                }
              }
            })
            .catch((error) => {
              console.log(error);
            });
        });
      }
      if (
        this.TableOptions.selectedRows.length != 0 &&
        this.TableOptions.selectedRows.length != 1
      ) {
        this.$message({
          type: "error",
          message: "只能勾选一条数据",
        });
      }
    },
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值