vue.js纯前端处理如何将后台返回来的csv数据导出成csv文件

需要实现一个下载csv文件的功能,但后台没有对这个下载文件进行处理,而是将csv数据传给前台而已,需要前台做一下处理。

这是按钮的代码:

 <a> <el-button size="mini" class="custom-confirm" @click="downloadByPeople()" type="primary">下载执行人工时表</el-button></a> 

通过异步请求获得的后台json返回数据是这样的格式:

只需要以下步骤就可以实现纯vue.js下载csv文件的功能:

 1  downloadByPeople(){3        this.$http.FileGet(this.pageParams).then(res => {4        const url = this.genUrl(res.data.data.workhour_csv_data, {});//{}指的是表头,res.data.data.workhour_csv_data是后台返回来的数据5        const a = document.createElement('a');6        a.href = url;7        a.download = "工时统计文件.csv";8        a.click();9        window.URL.revokeObjectURL(url);
10       });
11    },

1   genUrl(encoded, options) {
2       const dataBlob = new Blob([`\ufeff${encoded}`], { type: 'text/plain;charset=utf-8' });//返回的格式
3       return window.URL.createObjectURL(dataBlob);
4     },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/217706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安科瑞出席宁波市建筑电气2023年年会-安科瑞 蒋静

12月1日&#xff0c;宁波市建筑电气2023年年会在宁波市海曙天港禧悦酒店成功举办。作为推动宁波市建筑电气行业技术发展的专业交流会&#xff0c;吸引了建筑电气行业领导、专家、设计师、厂家等300多名代表参会。期间&#xff0c;安科瑞电气股份有限公司携智能楼宇、智慧校园、…

vue3父组件调用子组件el-dialog对话框

vue3父组件调用子组件el-dialog对话框 在写项目的时候&#xff0c;经常要使用父子组件通讯&#xff0c;我已经写了很多篇博客来介绍父子组件通讯了&#xff0c;vue中的父子组件通讯方式有差不多10来种&#xff0c;最常用的就那么一两种&#xff0c;这里我介绍其中我认为最基础…

19、命令模式(Command Pattern,不常用)

命令模式&#xff0c;将一个请求封装为一个对象&#xff08;命令&#xff09;&#xff0c;使发出请求的责任和执行请求的责任分割开&#xff0c;有效降低系统的耦合度。这样两者之间通过命令对象进行沟通&#xff0c;这样方便将命令对象进行储存、传递、调用、增加与管理。命令…

【flutter对抗】blutter使用+ACTF习题

最新的能很好反编译flutter程序的项目 1、安装 git clone https://github.com/worawit/blutter --depth1​ 然后我直接将对应的两个压缩包下载下来&#xff08;通过浏览器手动下载&#xff09; 不再通过python的代码来下载&#xff0c;之前一直卡在这个地方。 如果读者可以…

等保2.0的一些问题

测评机构的主要问题 目前国内的测评机构有199家&#xff0c;测评机构主要分为以下几类: 1)北京地区国字头的测评机构&#xff1a;全国199家测评机构中北京就占了30多家&#xff0c;几乎都是国字头的背景&#xff0c;很多挂着都是行业或者部委的名头&#xff0c;这些测评机构基本…

Layui深入

1、代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>注册页面</title> <style> .container { max-width: 600px; margin: 0 auto; padding: 20px; …

vue的小练习-翻转单词

先将字符串转成数组&#xff0c;用reverse&#xff08;&#xff09;翻转数组&#xff0c;再转成字符串 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevic…

四六级高频词组5

词组 151. be content with&#xff08;be satisfied with&#xff09; 满足于 be content to do sth. 愿意做某事 152. contrary to &#xff08;in opposition to&#xff09; 与…相反 153. on the contrary 相反 154. contrast…with 把…与…相对&#xff08;对照&am…

elasticsearch 基础语法

elasticsearch 常见语法 有index test_user_index 根据id 获取doc GET test_user_index/_doc/{id}根据doc_id 查询指定数据并根据 字段 amount 金额sum&#xff0c;id 统计 count&#xff0c;corp_id 去除 GET /test_order_index/_search {"size": 0, // 控制返回…

命令行参数(C语言)

目录 什么是命令行参数 main函数的可执行参数 不传参打印 传参打印 IDE传参 cmd传参 命令行参数的应用&#xff08;文件拷贝&#xff09; 什么是命令行参数 概念&#xff1a;命令行参数指的是在运行可执行文件时提供给程序的额外输入信息。它们通常以字符串形式出现&am…

Leetcode—2697.字典序最小回文串【简单】

2023每日刷题&#xff08;五十八&#xff09; Leetcode—2697.字典序最小回文串 实现代码 char * makeSmallestPalindrome(char * s){int len strlen(s);int left 0, right len - 1;while(left < len / 2) {if(s[left] > s[right]) {s[left] s[right];} else {s[ri…

beanutils.populate用法详解

beanutils.populate用法详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; BeanUtils.populate用法详解&#xff1a;轻松实现JavaBean属性的自动填充 在Java开发…

第三十四周:文献阅读+LSTM学习

目录 摘要 Abstract 文献阅读&#xff1a;综合EMD-LSTM模型在城市排水管网水质预测中的应用 现有问题 提出方法 EMD-LSTM综合模型 研究框架 结论 Long Short-term Memory(长短期记忆) 1. LSTM的结构 2. Multiple-layer LSTM 3.3 LSTM Example 3. GRU LSTM实现PM2…

不再兼容“安卓“,鸿蒙开发与android对比

首先&#xff0c;鸿蒙系统采用了分布式技术&#xff0c;其设计理念是“能用分布式解决的问题就不用单机解决”。这意味着鸿蒙旨在构建一个统一的分布式操作系统&#xff0c;可以支持不同设备之间的交互和通信。 而安卓系统基于Linux内核和Java编程语言构建&#xff0c;属于单机…

使用Nacos作为配置中心

Nacos配置中心简介 首先我们来看一下,微服务架构下关于配置文件的一些问题&#xff1a; 配置文件相对分散。在一个微服务架构下&#xff0c;配置文件会随着微服务的增多变的越来越多&#xff0c;而且分散 在各个微服务中&#xff0c;不好统一配置和管理。配置文件无法区分环境…

GZ029 智能电子产品设计与开发赛题第8套

2023年全国职业院校技能大赛高职组 “GZ029智能电子产品设计与开发”赛项赛卷八 题目&#xff1a;模拟工业传送带物品检测系统的设计与开发 1 竞赛任务 在智能电视机上播放工业传送带传输物品视频&#xff0c;模拟工业传送带物品检测系统&#xff08;以下简称物品检测系统&…

计算机杂谈系列精讲100篇-【计算机应用】漫谈TensorFlow和PyTorch

目录 PyTorch使用高频代码 基本配置 导入包和版本查询 可复现性 显卡设置

PgSQL高级

PgSQL高级 SQL执行顺序 (9) SELECT (10) DISTINCT col1, [OVER()] (6) AGG_FUNC(col2) (1) FROM table1 (3) JOIN table2 (2) ON table1.col table2.col (4) WHERE constraint_expression (5) GROUP BY col (7) WITH CUBE|ROLLUP (8) HAVING constraint_expression (11) ORD…

基于Java车辆管理系统(如高校、办公园区)

基于Java车辆管理系统&#xff08;如高校、办公园区&#xff09; 功能需求 1、车辆进出管理&#xff1a;对进出校园和园区的车辆进行登记、授权和监管&#xff0c;确保车辆进出安全&#xff0c;特别是对于贵重车辆或特殊车辆&#xff0c;可以进行特别监控。 2、停车管理&…

16ASM 汇编基础与Debug使用

目录 硬件运行机制 微机系统硬件组成 计算机系统组成 8086CPU组织结构 DoxBox安装 Debug使用 R命令 D命令 E命令 U命令 T命令 A命令 标志寄存器 常用机器指令 硬件运行机制 下面是一个电子器件二极管&#xff0c;正向加电则通&#xff0c;反向加电则不通 利用二…