需要实现一个下载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 oop 单列 双列 集合, 迭代器 的使用和说明

    一.集合(Collection) (1)集合的由来? 我们学习的是Java -- 面向对象 -- 操作很多对象 -- 存储 -- 容器(数组和StringBuffer) -- 数组 而数组的长度固定, ...

  2. 图解Redis之数据结构篇——整数集合

    前言     整数集合(intset)并不是一个基础的数据结构,而是Redis自己设计的一种存储结构,是集合键的底层实现之一,当一个集合只包含整数值元素,并且这个集合的元素数量不多时, Redis i ...

  3. 测试通过mweb进行发布Title

    MWeb 是专业的 Markdown 写作.记笔记.静态博客生成软件,目前已支持 Mac,iPad 和 iPhone.MWeb 有以下特色: 软件本身: 使用原生的 macOS 技术打造,追求与系统的 ...

  4. MySQL操作命令梳理(1)

    一.索引 1.创建索引 索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER TABLE来给表增加索引.以下命令语句分别展示了如何创建主键索引(PRIM ...

  5. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  6. JavaFX Metro UI 和 开发库

    目录 [隐藏] 1 Metro UI For JavaFX! 1.1 例子 1.2 Switch 1.3 Button 1.4 案例: 2 ConsrolsFX 3 Notification 的使用 ...

  7. Cobbler 自动安装CentOS7

    1. Cobbler介绍 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等.Cobbler可以使用命 ...

  8. UnityShader之积雪效果

    积雪效果是比较简单的,只需要计算顶点法线方向和世界向上方向之间的点乘,将得到的值与预设的阀值比较,小于阀值为0,用这个值进行插值就OK了 代码: Shader "MyShader/SnowS ...

  9. 微服务与网关技术(SIA-GateWay)

    一.背景 软件架构,总是在不断的演进中... 把时间退回到二十年之前,当时企业级领域研发主要推崇的还是C/S模式,PB.Delphi这样的开发软件是企业应用开发的主流.随着时间的推移,基于浏览器的B/ ...

  10. 开园第一篇---有关tensorflow加载不同模型的问题

    写在前面 今天刚刚开通博客,主要想法跟之前某位博主说的一样,希望通过博客园把每天努力的点滴记录下来,也算一种坚持的动力.我是小白一枚,有啥问题欢迎各位大神指教,鞠躬~~ 换了新工作,目前手头是OCR项 ...