前端點擊下載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()
        }
    })
}