vue Blob类型导出excel表格的下载

最新推荐文章于 2024-05-09 11:08:17 发布

_小太子

最新推荐文章于 2024-05-09 11:08:17 发布

阅读量295

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Teemo_shape/article/details/132554012

版权

import ajax from '@/plugins/request'

export default {
 warningDownload(data) {
    return ajax.request({
      url: `/influx/intervene/warning/download`,
      method: 'post',
      responseType: 'blob', //  responseType 不要忘记设置，不然格式会乱码
      data
    })
  },
}

<template>
  <div>
   
      <Button 
type="primary" 
class="sw-ml-8 sw-mb" 
@click="handleExport" 
:loading="downLoading"
          >导出
        </Button>
  </div>
</template>

<script>
import basicApi from '@/projects/admin/views/config/artificialConfig/api/basic.js'
methods: {
async handleExport() {
      console.log(this.searchParams.startDate, this.searchParams.endDate)
      if (this.searchParams.startDate && this.searchParams.endDate) {
        const start = this.$Date(this.searchParams.startDate)
        const end = this.$Date(this.searchParams.endDate)
        const diff = this.$Date(end).diff(this.$Date(start), 'day')
        if (start.isAfter(end)) {
          this.$Message.error('开始时间不能大于结束时间')
          return false
        } else if (diff > 31) {
          this.$Message.error('时间跨度不能超过31天')
          return false
        }
      } else {
        this.$Message.error('请选择导出的开始结束时间')
        return false
      }
      this.downLoading = true
      const res = await basicApi.warningDownload({
        factoryId: this.searchParams.factoryId,
        nodeIds: this.searchParams.nodeIds,
        status: this.searchParams.status,
        startDate: this.$Date(this.searchParams.startDate).format('YYYY-MM-DD'),
        endDate: this.$Date(this.searchParams.endDate).format('YYYY-MM-DD')
      })
      var blob = new Blob([res.data])
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = decodeURIComponent(
        res.headers['content-disposition'].match(/filename\*=UTF-8''(.*)$/)[1]
      )
      document.body.appendChild(downloadElement)
      downloadElement.click()
      document.body.removeChild(downloadElement)
      window.URL.revokeObjectURL(href)
      this.downLoading = false
    },
}
<script />