问题2-前端json数组数据转换成csv文件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将 JSON 数据导出为 CSV 文件</title>
</head>
<body>

<button id="exportBtn">导出为 CSV</button>

<script>
    document.getElementById('exportBtn').addEventListener('click', function() {
        // 假设这是你的 JSON 数据
        var jsonData = [
            { name: 'John', age: 30, city: 'New York' },
            { name: 'Alice', age: 25, city: 'Los Angeles' },
            { name: 'Bob', age: 35, city: 'Chicago' }
        ];

        // 构建 CSV 数据
        var csvData = '';
        var header = Object.keys(jsonData[0]).join(',') + '\n';
        csvData += header;
        jsonData.forEach(function(item) {
            var row = Object.values(item).join(',') + '\n';
            csvData += row;
        });

        // 创建并下载 CSV 文件
        var blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
        if (navigator.msSaveBlob) { // IE 10+
            navigator.msSaveBlob(blob, 'data.csv');
        } else {
            var link = document.createElement('a');
            if (link.download !== undefined) {
                var url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', 'data.csv');
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    });
</script>

</body>
</html>

代码运行结果

拓展知识

前端如何生成二进制文件——Blob对象

填坑:前端导出csv文件

csv原理

使用JavaScript 将Json数据导出CSV文件

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

市场复盘总结 20240401

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 二进三&#xff1a; 进级率中 38% 最常用…

绝地求生:[更新周报] 4/3 不停机更新:无上新、众多物品和活动即将下架!

大家好&#xff0c;我闲游盒&#xff1b;本周三4月3号&#xff0c;绝地求生不会有停机时间&#xff0c;大家可以随便玩~ ▲本周可选地图池 亚服/东南亚服&#xff1a;艾伦格、荣都、萨诺、米拉玛、帕拉莫&#xff1b; 日服/韩服KAKAO服&#xff1a;艾伦格、泰戈、萨诺、荣都、…

Spring面试常见问题

目录 1、为什么要用Spring框架&#xff1f;2、有了spring为什么又出现了 springboot&#xff1f;3、springboot出现后为什么又出现了spring cloud&#xff1f;4、SpringBoot自动配置&#xff08;重点&#xff09;5、SpringBoot启动流程&#xff08;重点&#xff09;6、简单谈一…

香港科技大学广州|数据科学与分析学域硕博招生宣讲会—天津大学专场

时间&#xff1a;2024年4月12日&#xff08;星期五&#xff09;14:00 地点&#xff1a;天津大学北洋园校区55楼B204 报名链接&#xff1a;https://www.wjx.top/vm/Q0cKTUI.aspx# 跨学科研究领域 *数据驱动的人工智能和机器学习 *统计学习和建模 工业和商业分析 *特定行业的数…

80C51实现四种流水灯流水灯 | 自用学习笔记

单个流水灯 #include <reg51.h> #include <intrins.h> // 包含移位库函数的头文件void delay(void) // 定义延时函数 {unsigned char i, j;for(i 0; i < 200; i) // 循环延时&#xff0c;延时约50msfor(j 0; j < 125; j); }void main(void){ unsigned ch…

C++ 注册Nacos

下载源码&#xff1a; git clone GitHub - nacos-group/nacos-sdk-cpp: C client for Nacos 编译源码 cd nacos-sdk-cpp cmake . make 生成库文件 在nacos-sdk-cpp 下 注册nacos 将include 和libnacos-cli.so libnacos-cli-static.a 放入你的工程 如果Nacos服务地址:…

C++ list

文章目录 list的介绍及使用list的介绍list的构造list iterator的使用list capacitylist element accesslist modifiers list模拟实现list节点类list迭代器类list类 list深度剖析list迭代器失效list反向迭代器 list与vector对比 list的介绍及使用 list的介绍 1.list的底层是双向…

yolov5目标检测可视化界面pyside6源码(无登录版)

一、软件简介&#xff1a; 这是基于yolov5-7.0目标检测实现的的可视化目标检测源码 本套项目没有用户登录的功能&#xff0c;如需用户登录版&#xff0c;看另一篇文章&#xff1a;yolov5pyside6登录用户管理目标检测可视化源码_yolov5用户登入功能-CSDN博客 ①程序中图片和图标…

2024年04月IDE流行度最新排名

点击查看最新IDE流行度最新排名&#xff08;每月更新&#xff09; 2024年04月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&am…

02-JDK新特性-泛型

泛型 什么是泛型 泛型是JDK5中引入的特性&#xff0c;它提供了编译时类型安全检测机制&#xff0c;该机制允许在编译是检测到非法的类型。 它的本质是参数化类型&#xff0c;也就是说操作的数据类型被指定为一个参数。 也就是将类型有原来的具体类型参数化&#xff0c;然后在…

MySQL 优化及故障排查

目录 一、mysql 前置知识点 二、MySQL 单实例常见故障 故障一 故障二 故障三 故障四 故障五 故障六 故障七 故障八 三、MySQL 主从故障排查 故障一 故障二 故障三 四、MySQL 优化 1.硬件方面 &#xff08;1&#xff09;关于 CPU &#xff08;2&#xff09;关…

使用虚拟引擎为AR体验提供动力

Powering AR Experiences with Unreal Engine ​​​​​​​ 目录 1. 虚拟引擎概述 2. 虚拟引擎如何为AR体验提供动力 3. 虚拟引擎中AR体验的组成部分是什么&#xff1f; 4. 使用虚拟引擎创建AR体验 5. 虚拟引擎中AR的优化提示 6. 将互动性融入AR与虚拟引擎 7. 在AR中…

Java项目:83 springboot知识管理系统

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本知识管理系统有管理员和用户两个角色。 管理员功能有个人中心&#xff0c;用户管理&#xff0c;文章分类管理&#xff0c;文章信息管理&…

Excel 数据-分列的三个经常用法

Case 1 &#xff1a;有时候数据导出时如果没有电子表格的话&#xff0c;只能导出本地文件&#xff0c;如下图情况&#xff1a; 可以使用数据-分列处理数据&#xff1a; 原来是因为SAP导出数据没有完成的原因&#xff0c;或者关闭Excel重新打开试一下。 重新打开后可以输入了 C…

NoSQL之 Redis配置

目录 关系数据库与非关系型数据库 关系型数据库&#xff1a; ●非关系型数据库 关系型数据库和非关系型数据库区别&#xff1a; &#xff08;1&#xff09;数据存储方式不同 &#xff08;2&#xff09;扩展方式不同 对事务性的支持不同 非关系型数据库产生背景 Redis简介…

C++初阶:5.STL简介(了解)

STL简介&#xff08;了解&#xff09; 一.什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 二. STL的版本 原始版本 Alexander Stepan…

绝地求生:Anti-ESP推进对于PUBG哪些影响?

大家好&#xff0c;我是闲游盒。近期&#xff0c;PUBG开发团队开发信介绍了反作弊团队讨论的新话题 - ESP&#xff08;Extra Sensory Perception&#xff09;。在详细看完开发信以后&#xff0c;今天跟大家简单聊聊关于Anti-ESP。 ESP是一种非法软件&#xff0c;允许玩家在游戏…

MacBook 访达使用技巧【mac 入门】

快捷键 打开访达搜索窗口默认快捷键【⌥ ⌘ 空格键】可以在键盘【系统偏好设置 -> 键盘->快捷键->聚焦】修改 但是我不会去修改它&#xff0c;因为我不常用访达的搜索窗口&#xff0c;更多的是想快速打开访达文件夹窗口&#xff0c;可以通过第三方软件定义访达的快…

计算机视觉新巅峰,微软牛津联合提出MVSplat登顶3D重建

开篇&#xff1a;探索稀疏多视图图像的3D场景重建与新视角合成的挑战 3D场景重建和新视角合成是计算机视觉领域的一项基础挑战&#xff0c;尤其是当输入图像非常稀疏&#xff08;例如&#xff0c;只有两张&#xff09;时。尽管利用神经场景表示&#xff0c;例如场景表示网络&a…

鸿蒙OS开发教学:【编程之重器-装饰器】

HarmonyOS 有19种装饰器 必须【2】 绘制一个页面&#xff0c;这两个肯定会用到 EntryComponent 可选【17】 StatePropLinkObjectLinkWatchStylesStoragePropStorageLinkProvideConsumeObservedBuilderBuilderParamLocalStoragePropLocalStorageLinkExtendConcurrent 如果…