<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()
}
})
}

前端点击下载excel表格数据的更多相关文章

  1. Java操作Jxl实现导出数据生成Excel表格数据文件

    实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...

  2. Vue3实现动态导入Excel表格数据

    1.  前言 在开发工作过程中,我们会遇到各种各样的表格数据导入,大部分我们的解决方案:提供一个模板前端进行下载,然后按照这个模板要求进行数据填充,最后上传导入,这是其中一种解决方案.个人认为还有另外 ...

  3. Visual Studio 2010利用libxl读写excel表格数据

    C++读写数据,一般通过txt文件,但是随着数据量的增大,采集数据时运用excel表格的优势得以逐步体现.本文主要介绍一下运用第三方库libxl,对excel表格数据进行读写.分为三个部分,第一部分是 ...

  4. 用多线程优化Excel表格数据导入校验的接口

    公司的需求,当前某个Excel导入功能,流程是:读取Excel数据,传入后台校验每一条数据,判断是否符合导入要求,返回给前端,导入预览展示.(前端等待响应,难点).用户再点击导入按钮,进行异步导入(前 ...

  5. 利用 pandas库读取excel表格数据

    利用 pandas库读取excel表格数据 初入IT行业,愿与大家一起学习,共同进步,有问题请指出!! 还在为数据读取而头疼呢,请看下方简洁介绍: 数据来源为国家统计局网站下载: 具体方法 代码: i ...

  6. jxl读取Excel表格数据

    调用jxl包实现Excel表格数据的读取,代码如下: import java.io.File; import java.io.IOException; import java.util.ArrayLi ...

  7. C#调用NPOI组件读取excel表格数据转为datatable写入word表格中并向word中插入图片/文字/书签 获得书签列表

    调用word的com组件将400条数据导入word表格中耗时10分钟简直不能忍受,使用NPOI组件耗时4秒钟.但是NPOI中替换书签内容的功能不知道是不支持还是没找到. 辅助类 Excel表格数据与D ...

  8. JXL读取写入excel表格数据

    问题描述: 使用java的jxl包创建.写入excel表格数据 问题解决: (1)说明 (2)写入execel数据 注: 以上是写入数据需要调用的函数接口 注: 具体接口调用过程,如上所示 (3)读取 ...

  9. 将包含经纬度点位信息的Excel表格数据导入到ArcMap中并输出成shapefile

    将包含经纬信息的Excel表格数据,导入到ArcMap中并输出成shapefile,再进行后面的操作.使用这种方法可以将每一个包含经纬信息的数据在ArcMap中点出来. 一.准备数据 新建Excel表 ...

随机推荐

  1. Python学习笔记—Dict和set

    dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...

  2. Linux安全工具之fail2ban防爆力破解

    一:简单介绍 fail2ban是一款实用软件,可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作 在企业中,有些很多人会开放root登录,这样就有机会给黑客造成暴力破解的机会 ...

  3. 开始JavaScript的学习了

    为何学习? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 4. 做为一个Web开发师,如果你想提供漂 ...

  4. ambari部署Hadoop集群(1)

    本例使用hortonworks 提供了 ambari 的安装方法,而且还很详细.以下是在 centos7 上的安装步骤. 基础配置: 1. 修改电脑的主机名 hostnamectl set-hostn ...

  5. 【React自制全家桶】四、React中state与props的分析与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  6. 批量替换word内容

    有一个需求需要把word中的一段文档的编号批量替换 如,把133-183批量的替换成31-81,需要批量的替换word,脚本如下 from docx import Document import os ...

  7. .NetCore 使用VSCode多项目调试

    使用VSCode可以调试.Net Core,但是调多个项目就需要进行一番设置. 首先创建一个总文件夹,以NetProjects文件夹为例,并创建一个解决方案.然后创建俩个.NetCore项目,并添加到 ...

  8. PHP+实现文件的上传和下载

    工程截图 配置路径 修改系统配置文件路径 填写正确的项目路径 将loclahost:811/up6/改为实际项目路径. 文件和文件夹批量上传 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文 ...

  9. debian系统安装vsftpd服务端和ftp客户端

    一.服务器安装和配置 1.安装vsftpd.(此处切换到su权限下了.其它用户请使用sudo权限,没有sudo权限的看前面的教程进行安装) apt-get install vsftpd 2.配置vsf ...

  10. style属性

    style加样式是加在行间,取样式也是在行间取: 我们来看下面这段代码: <!DOCTYPE HTML> <html> <head> <meta charse ...