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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容