Vue+elementUi 使用后端返回地址下载Excel表格

原创已于 2023-01-18 17:08:01 修改 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2023-01-18 17:07:16 首次发布

常见问题同时被 2 个专栏收录

15 篇文章

订阅专栏

web前端

12 篇文章

订阅专栏

文章讲述了如何使用HTML元素结合JavaScript方法实现导出Excel的功能。具体是通过el-button组件，设置加载状态、禁用条件及点击事件调用exportExcel方法。此方法构造URL，创建a标签并利用download和href属性触发文件下载，同时考虑了时间参数和公司名称等筛选条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分：

<el-button plain type="primary"  :loading="btnLoadingDay" 
:disabled="exportExcelDay" size="medium" 
icon="el-icon-upload2" @click.native="exportExcel()">
导出</el-button>

methods方法:

    exportExcel() {
      let this_ = this;
      let url_ = this.PATH;
      let url =
        url_ +
        "/prevention/expExcel?" +
        "startTime=" +
        this_.daysData.time[0] +
        "&endTime=" +
        this_.daysData.time[1] +
        "&name=" +
        this_.daysData.name +
        "&ssjg=" +
        this_.daysData.company;
      var btn = document.createElement("a");
       //借助a标签 属性下载
      btn.setAttribute("download", ""); // download属性
      console.log(url);
      btn.setAttribute("href", url);
      btn.click();
    },

关注博主即可阅读全文