vue选择时间范围导出文件

效果图

直接上代码

<el-date-picker
        v-model="rangeValue"
        type="daterange"
        value-format="yyyy-MM-dd"
        align="right"
        style="margin-right: 10px;"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
      <el-tooltip class="item" effect="dark" content="导出" placement="top-end">
        <el-button
          size="mini"
          icon="el-icon-download"
          circle
          @click="exportLastDay"
        />
      </el-tooltip>

时间组件快捷键

pickerOptions: {
        shortcuts: [{
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }]
      }

初始化显示时间

// 使用时间戳格式化为yyyy-MM-dd hh:mm:ss
    let end = new Date()
    end = formateTimestamp(end.getTime())
    const endTime = end.split(' ')
    let start = new Date()
    start = formateTimestamp(start.setTime(start.getTime() - 3600 * 1000 * 24 * 3))
    const startTime = start.split(' ')
    this.rangeValue = [startTime[0], endTime[0]]

导出方法

exportLastDay() {
      if (this.rangeValue && this.rangeValue.length !== 2 || !this.rangeValue) {
        this.$message({
          type: 'error',
          message: '请选择时间范围！'
        })
        return
      }
      const startTime = this.rangeValue[0]
      const endTime = this.rangeValue[1]
      const data = {
        startTime: startTime,
        endTime: endTime,
        url: this.url
      }
      const req_model = {
        appName: 'avatar-front',
        format: 'json',
        sign: '',
        param: data,
        source: 'deep_space_web',
        timestamp: new Date().getTime() + '',
        version: ''
      }
      axios({
        url: getMonitorBaseUrl() + '/avatar-monitor/qps/exportQPSLog',
        method: 'post',
        responseType: 'blob',
        data: req_model
      }).then(res => {
        if (res) {
          // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
          const blob = new Blob([res.data], { type: 'text/plain' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          // 设置文件名称,decodeURI：可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
          let fileName = decodeURI(res.headers['content-disposition'])
          if (fileName) {
            // 根据后端返回的数据处理文件名称
            fileName = fileName.substring(fileName.indexOf('=') + 1)
          }
          link.download = fileName
          document.body.appendChild(link)
          link.click()
          // 下载完成释放URL 对象
          URL.revokeObjectURL(link.href)
          link.remove()
        }
      })
    }