vue 导出 下载 文件 excel 三种方式

vue 导出 下载 文件 excel 三种方式 ，大家可以参考一下

1. window.location.href

    // 导出
    handleExport() {
      let params = this.filter;
      let str = "";
      for (let key in params) {
        if (params[key]) {
          str += `&${key}=${params[key]}`;
        }
      }
      window.location.href = `${process.env.VUE_BASE_API}/p_coupon/?download=1${str}`;
    },

2. axios 请求

    // 导出
    handleExport() {
      this.exportLoading = true;
      let params = "";
      if (this.selectDate != "") {
        params = {
          time: this.selectDate.replace(/-/g, "/"),
        };
      }
      axios({
        method: "GET",
        url: `${process.env.VUE_BASE_API}/userDimensionHistory/export`,
        params: params,
        responseType: "blob",
        headers: {
          Authorization: getToken(),
        },
      })
        .then((res) => {
          this.exportLoading = false;
          const fileread = new FileReader();
          fileread.onload = (e) => {
            try {
              const message = JSON.parse(e.target.result);
              console.log(message);
            } catch (e) {
              let url = window.URL.createObjectURL(res.data);
              let link = document.createElement("a");
              let timer = new Date().getTime();
              link.download = timer + ".xls";
              link.href = url;
              link.click();
            }
          };
          fileread.readAsText(res.data);
        })
        .catch((err) => {
          this.exportLoading = false;
          console.log(err);
        });
    },

3. el-link 方式

<el-link type="primary" :href="scope.row.fileUrl">下载</el-link>

<el-link :href="`${down_url}/userDimensionHistory/export${down_time}`">下载</el-link>