zoukankan      html  css  js  c++  java
  • 前端点击下载excel表格数据

    <el-button type="primary" @click="downloadChartData" size="mini">下 载</el-button>
    // 隐藏的download按钮,返回数据后自动触发click生成csv文件
    <el-button type="primary" style="display: none">
    <a href="####" style="color: #fff;" id="download">excel下载地址</a>
    </el-button>
    downloadChartData() {
    let self = this
    let param = {
    "start":common.timeFormat(this.form.time[0],'yy/MM/dd-hh:mm:ss'),
    "end":common.timeFormat(this.form.time[1],'yy/MM/dd-hh:mm:ss'),
    "aggregator": "zimsum",
    "tags": {
    "isp": this.form.isp,
    "cdn": this.form.cdn,
    "province": this.form.province,
    "domain": this.form.domain,
    "acctype": this.form.domainType
    },
    // "type": this.form.domainType
    }
    let totalParam = JSON.parse(JSON.stringify(param))
    let paramTags = totalParam.tags
    self.loading = true
    for(let key in param.tags){
    if(param.tags[key] === 'total'){
    delete param.tags[key]
    }
    }
    this.$ajax({
    method: 'post',
    url: `${self.host}/opentsdb/download`,
    data: param,
    responseType: 'blob'
    }).then(function (res) {
    self.loading = false
    if(res.data.size && res.data.size === 0){
    self.$message({
    type: 'warning',
    message: '暂无数据!'
    });
    }else{
    let domainTags = paramTags.domain === 'total' ? '域名汇总' : paramTags.domain
    let ispTags = paramTags.isp === 'total' ? '-运营商汇总' : '-' + common.ispMap[paramTags.isp]
    let cdnTags = paramTags.cdn === 'total' ? '-运营商汇总' : '-' + common.cdnMap[paramTags.cdn]
    let provinceTags = paramTags.province === 'total' ? '-运营商汇总' : '-' + common.provinceMap[paramTags.province]
    let retFile = res.data
    let downloadLink = document.getElementById('download')
    let blob = new Blob([retFile], {type: 'text/plain;charset=utf-8'})
    let downloadUrl = window.URL.createObjectURL(blob)
    let downloadFileName = domainTags + ispTags + cdnTags + provinceTags + '-' + param.start + '___' + param.end + '-' + new Date().getTime() + '.csv'
    downloadLink.setAttribute('href', downloadUrl)
    downloadLink.setAttribute('download', downloadFileName)
    // 自动点击下载按钮,进行下载
    downloadLink.click()
    }
    })
    }

  • 相关阅读:
    dp的小理解
    POJ
    isolate-user-vlan隔离用户vlan的配置
    【mvrp多协议vlan注册协议给予三种注册方式的验证】
    【Commare中关于理论范畴和技术常用的技术术语】
    BGP映射和联盟
    filter-policy和AS-PATH-FILTER过滤BGP路由条目
    【路由过滤工具小结】
    【ISIS(中间系统到中间系统)路由链路状态信息协议初识】
    【poe设备加电配置】
  • 原文地址:https://www.cnblogs.com/yzhihao/p/11596655.html
Copyright © 2011-2022 走看看