interface dataList {

cmd_cnt: number;

risk_name: string;

user_cnt: number;

risk_type:string;

}

listOfData: dataList[] = [ ];

dataObj:any = {

title:['风险名称','风险事件','涉及用户数','涉及操作次数'], //数据的每一列

jsonKey:['risk_type', 'risk_name','user_cnt','cmd_cnt'], //数据的标题对应的键

data: this.listOfData, //具体的数据

fileName: "数据汇总" //数据名称

};

点击导出文件

exprotCSV(){

this.dataObj.data = this.listOfData

this.exportCvs(this.dataObj) //调用具体的方法处理数据

}

//处理导出文件的函数

exportCvs(dataObj:any) {

var title = dataObj.title;

var jsonKey = dataObj.jsonKey;

var data = dataObj.data;

var str = [];

str.push(dataObj.title.join(",") + "\n");

for (var i = 0; i < data.length; i++) {

var temp = [];

for (var j = 0; j < jsonKey.length; j++) {

temp.push(data[i][jsonKey[j]]);

}

str.push(temp.join(",") + "\n");

}

var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join("")); //text/csv表示文件类型 ,生成一个地址

var downloadLink = document.createElement("a"); //创建一个a标签

downloadLink.href = uri; //给 a标签加入href

downloadLink.download = new Date().toISOString().substring(0, 10) + "-" + dataObj.fileName + ".csv"; //文件名称

document.body.appendChild(downloadLink); //挂载到文件里面

downloadLink.click(); //点击下载

document.body.removeChild(downloadLink); //删除a标签

};

纯前端实现后端给数据进行文件导出——angular里面的使用的更多相关文章

  1. Spring MVC之中前端向后端传数据

    Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况. 一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在 ...

  2. 前端与后端的数据交互(jquery ajax+python flask)

    前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...

  3. Python Django 前后端数据交互 之 前端向后端发送数据

    Python Django 之 前端向后端发送数据

  4. 前端和后端的数据交互(jquery ajax+python flask+mysql)

    上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...

  5. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  6. 前端调用后端接口下载excel文件的几种方式

    今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...

  7. vue+jquery使用FormData向后端传递数据和文件,express如何获取

    使用multiparty 模块 下载 cnpm install multiparty --save 前端代码: <template> <div class="add-are ...

  8. 关于前端调用后端php数据跨域的问题

    https://blog.csdn.net/qq_21386275/article/details/87269979 js前端 <!DOCTYPE html><html>< ...

  9. 前端向后端获取数据的三种方法:ajax、axios、fetch

    1.jQuery中的ajax get方法: $.ajax({ url:"v4/api/film/now-playing?t=1539401039415&page=1&coun ...

  10. C#后端接收前端的各种类型数据

    前端往后端提交数据的方式常用的就这么三种:1.form提交:2.url参数提交:3.json提交 1.针对表单form方式的提交 在后端使用Request.Form的方式接收,比如 前端代码片段: v ...

随机推荐

  1. Oracle学习undo之IMU机制

    1.传统undo块 在传统情况下Oracle对待undo表空间和普通表空间是一视同仁的,一个事务开始的时候,在相对空闲的undo回滚段的段头块的事务表获取一个槽位,把事务信息写上,有可能: 1.1.段 ...

  2. maven加载本地的jar包

    方式1 ,通过scope = system的方式加载 <dependency> <groupId>com.sun.jna</groupId> <artifac ...

  3. 记录解决方案(sqlserver篇)

    一个月的补卡次数不超过三次(即统计一个月内某人的补卡次数) 表结构是某人一天内的四次打卡状态,这样是统计当月补卡的天数了(错误) select count(*) from [Proc_HR_Punch ...

  4. SpringBoot配置阿里云https提示端口占用问题

    1.因为要配置https,所以去网上找了一些资料,然后按照步骤,依次完成了以下步骤 ①在application.yml中加入配置 http: port: 12000 #原本的端口号server: po ...

  5. 安装TortoiseSVN. msi 报错 2503 2502错误

    tortoisegit下载地址 https://tortoisegit.org/download/ [错误现象] 安装TortoiseSVN. msi 报错 2503 2502错误 [错误原因] 没有 ...

  6. video.js 苹果手机设置了currentTime却还是从头播放?

    最近在项目(方案大赛)中需要保存学习进度,用户再打开页面时会从上次的视频进度继续观看.我们使用了video.js,在PC浏览器和安卓手机上均可以跳转,但是苹果手机很顽固的从头开始了呢-- 后来我们在 ...

  7. Elasticsearch集群部署和运维命令

    Elasticsearch集群部署 下载tar包 在"https://www.elastic.co/cn/downloads/elasticsearch"页面,有 past rel ...

  8. 2. Marker 标记(就是在地图上放上标记)

    1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="U ...

  9. Mysql数据库基础第二章:(十)联合查询

    Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...

  10. window server 2012R2部署asp.net core项目应用程序池自动停止

    当在windows  server 2012R2上部署asp.net core项目时,需要安装the Hosting Bundle,但当我们安装完dotnet-hosting后,浏览站点应用程序池会自 ...