[JavaScript知识库] elementUI +vue 导出二进制文件流excel文件

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> elementUI +vue 导出二进制文件流excel文件 -> 正文阅读

[JavaScript知识库]elementUI +vue 导出二进制文件流excel文件

1.html代码

  <el-button  icon="el-icon-download" size="small"
            type="primary" plain @click="exportExcel()">导出</el-button>

2.js代码

  //导出 exportExcel
    exportExcel() {
      const paralist = {
        month: this.listQuery.month,
      };
      const _that = this;
      // 导出所有数据
      this.$confirm("是否确认导出数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        _that.fullscreenLoading = true;
//exportExcel 连接后台数据方法
        exportExcel(paralist).then((response) => {
          const blob = new Blob([response], { type: "application/xlsx" });
          const filename = "绩效.xlsx";
          const link = document.createElement("a");
          console.log(link);
          link.href = URL.createObjectURL(blob);
          link.download = filename;
          console.log(link);
          document.body.appendChild(link);
          link.click();
          window.setTimeout(function () {
            URL.revokeObjectURL(blob);
            document.body.removeChild(link);
            _that.fullscreenLoading = false;
          }, 0);
        });
      });
    },