vue 根据后端接口导出excel数据

最新推荐文章于 2024-07-03 18:05:25 发布

原创最新推荐文章于 2024-07-03 18:05:25 发布 · 670 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue2 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在前端使用Element UI实现点击按钮触发导出Excel的功能，包括确认对话框的展示和生成文件的步骤。

1.导出按钮

  <template #operate="{ scope }">
      <el-button @click="exportExcel(scope.row.id)">导出</el-button>
  </template>

2.导出

    // 点击导出
    exportExcel(id) {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const link = document.createElement("a");
          link.target = "_blank";
          link.href =
            window.location.origin +
            "/api/bill/excel?id=" +
            id;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(() => {});
    },