按键弹出弹框，选择时间段，导出excel表格文件

最新推荐文章于 2024-08-22 11:06:05 发布

m0_45305745

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量230

点赞数

文章标签： vue.js 前端 html

本文链接：https://blog.csdn.net/m0_45305745/article/details/124950211

版权

记录：

接口导出Excel表格

1.在js文件中加入后端提供的接口。

因为导出文件流，所以要加后面的 responseType: 'blob'

2.导入js文件至vue文件中。

import 。。。 from ‘。。。.js’

html：

<div style="text-align: center">
              <el-button
                @click="exportHYStudentList(scope.row)"
                size="mini"
                v-if="
                  btnPerm('monitoring_manage_school_manage_exportHy') &&
                  scope.row.areaCode.indexOf('4201') > -1 &&
                  (scope.row.payType == 'recharge' || scope.row.isFreight == 1)
                "
                type="text"
                >导出货运报名学员</el-button
              >
            </div>

<el-dialog
      title="选择时间段"
      :visible.sync="exportHYStudentDialogVisible"
      width="30%"
      :close-on-click-modal="false"
      class="export-box"
      :before-close="exportHYStudentClose"
    >
      <el-form label-width="90px" :model="exportInfo">
        <el-form-item label="导出时间段">
          <el-date-picker
            style="width: 100%"
            v-model="exportDate"
            @change="exportChange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exportHYStudentClose">取 消</el-button>
        <el-button type="primary" @click="exportHYStudentInfo">导 出</el-button>
      </span>
    </el-dialog>

methods：

exportHYStudentClose() {
      this.exportHYStudentDialogVisible = false;
      this.exportDate = "";
      this.exportInfo.startDate = "";
      this.exportInfo.endDate = "";
    },
    async exportHYStudentInfo() {
      await exportHYStudentsApi(this.exportInfo).then((res) => {
        console.log(res);
        var exportType = sessionStorage.getItem("exportType");
        var name = exportType.split("=")[1];
        var filename = decodeURI(name.substring(0, name.indexOf(".")));

        let blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
        }); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); // 创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; // 下载后文件名
        document.body.appendChild(downloadElement);
        // downloadElement.download = this.exportInfo.schoolName + ".xls"; // 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      });
    },
    exportHYStudentList(row) {
      this.exportInfo.schoolId = row.id;
      this.exportInfo.schoolName = row.name;
      this.exportHYStudentDialogVisible = true;
    },

传参需要开始时间、结束时间、学校id、学校名称。

生成的表格名称后面自带时间戳