前端如何将接口传来的列表数据(数组)直接下载成csv文件

前言:最近遇到一个需求,需要实现一个下载表格数据的操作,一般来说是前端请求后端的下载接口,将文件流下载下来,但是因为这个项目任务时间比较紧,后端没时间做下载接口,所以暂时由前端直接调列表的git接口,把后端传给我们的数组直接下载成csv文件,情况如下图:

实现步骤:

1、先在util文件夹下新增一个js文件:Export2Csv.js,放转csv的插件代码:

function processRow(row) {let finalVal = ''for (let j = 0; j < row.length; j++) {let innerValue = row[j] === null ? '' : row[j].toString()if (row[j] instanceof Date) {innerValue = row[j].toLocaleString()}let result = innerValue.replace(/"/g, '""')if (result.search(/("|,|\n)/g) >= 0) { result = '"' + result + '"' }if (j > 0) { finalVal += ',' }finalVal += result}return finalVal + '\n'
}export function exportToCsv(filename, rows) {let csvFile = ''for (let i = 0; i < rows.length; i++) {csvFile += processRow(rows[i])}// 添加\ufeff头,标识excel可以打开UTF8编码的文件const blob = new Blob(['\ufeff', csvFile], { type: 'text/csv;charset=utf-8;' })if (navigator.msSaveBlob) { // IE 10+navigator.msSaveBlob(blob, filename)} else {const link = document.createElement('a')if (link.download !== undefined) { // feature detection// Browsers that support HTML5 download attributeconst url = URL.createObjectURL(blob)link.setAttribute('href', url)link.setAttribute('download', filename)link.style.visibility = 'hidden'document.body.appendChild(link)link.click()document.body.removeChild(link)}}
}export function exportDictArray2csv(data, filename) {const keys = Object.keys(data[0])const rows = []// writer headerrows.push(keys)data.forEach(dict => {const row = []keys.forEach(key => {row.push(dict[key])})rows.push(row)})exportToCsv(filename, rows)
}export default exportDictArray2csv

2、在需要用的页面引入

import { exportDictArray2csv } from "@/utils/Export2Csv.js";

3、使用

const filename = `data.csv`;
exportDictArray2csv(tableData.value, filename);

filename就是下载的文件名,可以自己自定义

tableData.value就是接口传给我们的数据

tableData.value的数据格式:

[{aaa:1,bbb:2},{aaa:3,bbb:4}]

下载下来的csv文件:

aaabbb
12
34

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

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

相关文章

新手开通抖音小店的时候,必须要注意的6点!建议收藏!

大家好&#xff0c;我是电商小V 今天咱们就来详细的说一下开通抖音小店的时候需要注意的事项&#xff0c;避免咱们在开店的时候踩坑导致店铺后期的正常运营&#xff0c; 第一点&#xff1a;是关于营业执照的问题 营业执照咱们都知道&#xff0c;分为个体和企业的&#xff0c;咱…

区块链详解

1. 概述 1.1 什么是区块链&#xff1f; 区块链是一种分布式数据库技术&#xff0c;它以链式数据结构的形式存储数据&#xff0c;每个数据块与前一个数据块相关联&#xff0c;形成了一个不断增长的数据链。每个数据块中包含了一定数量的交易信息或其他数据&#xff0c;这些数据…

Servlet、Tomcat、Control区别

1. Servlet Servlet 是一种动态网站开发技术&#xff0c;专门用来处理客户端的请求并生成响应。Servlet直接与Tomcat交互&#xff0c;处理从Tomcat传来的请求。然后生成网页或其他类型的响应发送回Tomcat&#xff0c;Tomcat再将这些响应返回给用户的浏览器。 2. TomCat tomc…

【数据结构】三、栈和队列:2.顺序栈共享栈(顺序栈的初始化,判空,进栈,出栈,读取栈顶,顺序栈实例)

文章目录 1.顺序栈1.1初始化1.2判空1.3进栈1.4出栈1.5读取栈顶1.6销毁栈❗1.7顺序栈c实例 2.共享栈2.1初始化2.2判满 1.顺序栈 用顺序存储实现的栈 顺序栈的缺点&#xff1a;栈的大小不可变。 #define MaxSize 10 //定义栈中元素的最大个数 typedef struct{ElemType data[…

28377d升级

dsp 28377在线升级 实例总结_f021_cpu0_w1_register_address-CSDN博客

leetcode1143. 最长公共子序列(ACM模式解法)

题目描述 给你一个序列X和另一个序列Z&#xff0c;当Z中的所有元素都在X中存在&#xff0c;并且在X中的下标顺序是严格递增的&#xff0c;那么就把Z叫做X的子序列。 例如&#xff1a;Z是序列X的一个子序列&#xff0c;Z中的元素在X中的下标序列为<1,2,4,6>。 现给你两个…

指纹浏览器:网络安全与隐私的新工具

在互联网时代&#xff0c;隐私和网络安全成为人们越来越关注的话题。随着数字化的发展&#xff0c;个人信息的泄露和在线追踪的问题愈发严峻。在这个背景下&#xff0c;"指纹浏览器"作为一种新型工具&#xff0c;开始受到关注。撸空投需要了解指纹浏览器。本文将深入…

动态规划与搜索算法

动态规划&#xff08;Dynamic Programming, DP&#xff09; 动态规划是一种解决优化问题的算法设计技术&#xff0c;主要用于求解具有重叠子问题和最优子结构特性的最优化问题。在动态规划中&#xff0c;我们会将复杂问题分解为多个子问题&#xff0c;并计算子问题的解&#x…

软考-信息系统项目管理师-论文技术架构模板(60天备考第26天)

分享一段信息系统项目管理师论文项目技术架构描述的万能模板&#xff0c;供大家参考。距离考试还有二十八天&#xff0c;如果论文写不好的可以加微进论文指导群学习论文写作。 该系统前端基于Vue开发&#xff0c;后端基于java开发&#xff0c;前后端分离部署。整体采用B/S架构&…

你缺的是一个机会吗?

大家好&#xff0c;我是记得诚。 前两天面试了一个&#xff0c;差不多有5-6年的硬件开发经验&#xff0c;没有达到我的要求&#xff0c;给否掉了。 大公司里面&#xff0c;分工很细&#xff0c;原理图一个人&#xff0c;甚至系统大的产品&#xff0c;原理图由几个人共同完成&…

【收藏全开源】JAVA共享自习室共享学习室无人系统支持微信小程序+微信公众号+H5_博纳软云

JAVA打造无人自习室新纪元&#xff1a;微信小程序、公众号与H5三合一共享学习空间 在信息化时代的浪潮下&#xff0c;学习方式正经历着前所未有的变革。JAVA技术以其强大的跨平台性和稳定性&#xff0c;引领着共享自习室领域迈向新的高度。我们推出的无人自习室共享学习室系统…

Spring Boot 统一数据返回格式:优化前后端开发协作的利器

在开发基于Spring Boot的Web应用程序时&#xff0c;统一的数据返回格式是非常重要的。 它可以使得前后端的交互更加规范和统一&#xff0c;降低前后端开发人员的沟通成本&#xff0c;提高开发效率。 本文将分析Spring Boot中统一数据返回格式的必要性&#xff0c;以及如何实现…

Java基础(6)序列化和反序列化

序列化&#xff08;Serialization&#xff09;是将对象的状态信息转换为可以存储或传输的形式的过程。在Java中&#xff0c;这通常意味着将对象转换为字节流&#xff0c;以便可以将其保存到磁盘上或通过网络传输到另一个网络节点。相反&#xff0c;反序列化&#xff08;Deseria…

EVRPD-440NZ5M智能型电压保护器 施耐德韩国三和

EVRPD-440NZ5M智能型电压保护器 施耐德韩国三和 EVR-PD是施耐德EOCR的一款电压保护器产品&#xff0c;具有过电压、欠电压、缺相、逆相、电压不平衡等保护功能 EOCR简介&#xff1a; EOCR即Electronic Over Current Relays电子式电动机保护继电器英文缩写&#xff0c;韩国三…

今年做电商,视频号小店可以冲一下,这次腾讯不负所望站在了风口

腾讯做电商&#xff0c;能不能搞&#xff1f; 对于腾讯做电商这件事&#xff0c;很多玩家并不看好&#xff0c;毕竟腾讯想做的东西太多了&#xff0c;做电商这件事也曾失败过&#xff1b; 但是这次&#xff0c;无论是电商老玩家还是新手玩家&#xff0c;腾讯推出的视频号小店…

C++复盘(一)

文章目录 常量标识符命名规则数据类型sizeof关键字浮点数字符型转义字符字符串型布尔类型bool 比较运算符switch-case语句rand()随机数种子srand() goto语句一维数组函数函数的声明函数的分文件编写 指针指针所占内存空间空指针野指针const修饰指针1、常量指针2、指针常量3、co…

element的el-table 解决表格多页选择数据时,数据被清空

问题&#xff1a;切换页码时&#xff0c;勾选的数据会被清空 重点看我圈出来的&#xff0c;直接复制&#xff0c;注意&#xff0c;我这里 return row.productId;一般大家的是 return row.id,根据接口定的唯一变量 :row-key"getRowKeys"​​​​​​​:reserve-sele…

Android CalendarView助你打造精美的Android日历应用

Android CalendarView助你打造精美的Android日历应用 1. 引言 移动应用中的日历功能对于用户来说至关重要&#xff0c;它不仅是时间管理的工具&#xff0c;还能帮助用户记录重要事件和安排活动。因此&#xff0c;一个高效、易用的日历控件对于移动应用的成功至关重要。 传统…

通过AI助手实现一个nas定时任务更新阿里云域名解析

一.通过AI助手实现一个ip-domain.py的脚本 起一个Python脚本&#xff0c;ip-domain.py&#xff1b;注意已安装Python3.的运行环境&#xff1b;将下面阿里云相关配置添加&#xff0c;注意这里引用了两个包&#xff0c;requests和alibabacloud_alidns20150109&#xff1b;执行前…

SCP收容物151~160

注 &#xff1a;此文接SCP收容物141~150,本文只供开玩笑 ,与steve_gqq_MC合作。 --------------------------------------------------------------------------------------------------------------------------------- 目录 scp-151 scp-152 scp-153 scp-154 scp-155…