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

这是按钮的代码:

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

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

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

  downloadByPeople(){

        this.$http.FileGet(this.pageParams).then(res => {
const url = this.genUrl(res.data.data.workhour_csv_data, {});//{}指的是表头,res.data.data.workhour_csv_data是后台返回来的数据
const a = document.createElement('a');
a.href = url;
a.download = "工时统计文件.csv";
a.click();
window.URL.revokeObjectURL(url);
});
},
   genUrl(encoded, options) {
const dataBlob = new Blob([`\ufeff${encoded}`], { type: 'text/plain;charset=utf-8' });//返回的格式
return window.URL.createObjectURL(dataBlob);
},

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

  1. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  3. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  4. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  5. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  6. Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  7. Vue.js到前端工程化

    b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...

  8. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  9. 用node.js写一个简单爬虫,并将数据导出为 excel 文件

    引子 最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍 ...

随机推荐

  1. java中代码的注释和快捷

    添加必要的注释,对一个有责任心.有道德模范的前端必须具备的好习惯, 可以大大提高代码的可维护性.可读性. java代码注释快捷键:ctrl+shift+/首先熟悉一下html.css.js的注释的写法 ...

  2. python整形及浮点型求余数的区别

    1.代码如下 a=7.0b=4.0c=7e=4 #整形求余print("%d/%d=%d" %(c,e,c/e)) #将浮点型强制转换为整形,余数用浮点型表示print(" ...

  3. springBoot数据校验与统一异常处理

    概念 异常,在程序中经常发生,如果发生异常怎样给用户一个良好的反馈体验就是我们需要处理的问题.以前处理异常信息,经常都是给前端一个统一的响应,如数据错误,程序崩溃等等.没办法指出哪里出错了,这是一种对 ...

  4. 【iOS】创建真机调试证书

    今天第一次完整的在一个开发者账号里添加证书,刚接触,还真有些不熟悉,还好找到了一篇不错的文章:iOS开发:创建真机调试证书 ,做了很详细的介绍. 分享一下!!

  5. RabbitMQ(四):使用Docker构建RabbitMQ高可用负载均衡集群

    本文使用Docker搭建RabbitMQ集群,然后使用HAProxy做负载均衡,最后使用KeepAlived实现集群高可用,从而搭建起来一个完成了RabbitMQ高可用负载均衡集群.受限于自身条件,本 ...

  6. 使用用树莓派打造远程WEB服务器

    简介:系统配置Raspberry Pi 3B + Raspbian + MySQL5.7 + Tomcat 9 + Nginx + 公网IP. 工具:Win32DiskImager .FileZill ...

  7. Currency Exchange POJ1860

    Description Several currency exchange points are working in our city. Let us suppose that each point ...

  8. Oracle_InstantClient 及PL/SQL Developer工具的安装

    一.下载 InstantClient 地址: http://www.oracle.com/technology/software/tech/oci/instantclient/index.html i ...

  9. 【Java例题】6.1 进制转换

    1.进制转换.输入一个某种进制的整数,将其转换为其它进制的整数.说明:仅考虑十.二.八和十六进制. package chapter6; import java.util.*; public class ...

  10. 通过wireshark学习Traceroute命令和mtr(UDP,ICMP协议)

    traceroute: 通过TTL限定的ICMP/UDP/TCP侦测包来发现从本地主机到远端目标主机之间的第三层转发路径.用来调试网络连接性和路由问题. mtr: traceroute的一个变种,能根 ...