当前位置：首页 > news >正文

纯html实现的json数据转csv文件

news 来源：原创 2025/5/11 12:07:23

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSON转CSV转换器</title><style>body {font-family: Arial, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;}.container {display: flex;flex-direction: column;gap: 15px;}textarea {width: 100%;height: 200px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;resize: vertical;}button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}#result {margin-top: 20px;padding: 10px;border: 1px solid #ddd;border-radius: 4px;min-height: 100px;white-space: pre-wrap;background-color: #f9f9f9;}.error {color: red;margin-top: 10px;}.button-group {display: flex;gap: 10px;}#downloadBtn {background-color: #2196F3;}#downloadBtn:hover {background-color: #0b7dda;}</style>
</head>
<body><h1>JSON数组转换为CSV</h1><div class="container"><label for="jsonInput">请输入JSON数组：</label><textarea id="jsonInput" placeholder='例如：[{"name":"张三","age":25,"city":"北京"},{"name":"李四","age":30,"city":"上海"}]'>[{"name":"张三","age":25,"city":"北京"},{"name":"李四","age":30,"city":"上海"}]</textarea><div class="button-group"><button id="convertBtn">转换为CSV</button><button id="downloadBtn" disabled>下载CSV文件</button></div><div id="error" class="error"></div><label for="result">CSV结果：</label><div id="result"></div></div><script>let currentCsv = ''; // 存储当前转换的CSV内容document.getElementById('convertBtn').addEventListener('click', function() {const jsonInput = document.getElementById('jsonInput').value.trim();const resultDiv = document.getElementById('result');const errorDiv = document.getElementById('error');const downloadBtn = document.getElementById('downloadBtn');// 清空之前的错误和结果errorDiv.textContent = '';resultDiv.textContent = '';downloadBtn.disabled = true;if (!jsonInput) {errorDiv.textContent = '请输入JSON内容';return;}try {// 解析JSON输入const jsonArray = JSON.parse(jsonInput);if (!Array.isArray(jsonArray)) {errorDiv.textContent = '输入的不是JSON数组';return;}if (jsonArray.length === 0) {errorDiv.textContent = 'JSON数组为空';return;}// 转换为CSVcurrentCsv = convertJsonToCsv(jsonArray);// 显示结果resultDiv.textContent = currentCsv;// 启用下载按钮downloadBtn.disabled = false;} catch (e) {errorDiv.textContent = 'JSON解析错误: ' + e.message;}});// 下载按钮点击事件document.getElementById('downloadBtn').addEventListener('click', function() {if (!currentCsv) {document.getElementById('error').textContent = '没有可下载的CSV内容';return;}// 添加UTF-8 BOM头，解决Excel中文乱码问题const bom = '\uFEFF';const csvWithBom = bom + currentCsv;// 创建一个Blob对象，指定编码为UTF-8const blob = new Blob([csvWithBom], { type: 'text/csv;charset=utf-8;' });// 创建一个下载链接const link = document.createElement('a');const url = URL.createObjectURL(blob);// 设置下载属性link.setAttribute('href', url);link.setAttribute('download', 'data.csv');link.style.visibility = 'hidden';// 添加到DOM并触发点击document.body.appendChild(link);link.click();// 清理document.body.removeChild(link);URL.revokeObjectURL(url);});/*** 将JSON数组转换为CSV字符串* [url=home.php?mod=space&uid=952169]@Param[/url] {Array} jsonArray - JSON对象数组* @returns {string} CSV格式的字符串*/function convertJsonToCsv(jsonArray) {// 收集所有可能的列标题const headers = new Set();jsonArray.forEach(item => {Object.keys(item).forEach(key => {headers.add(key);});});// 将Set转换为数组const headerArray = Array.from(headers);// 构建CSV内容let csv = '';// 添加标题行csv += headerArray.join(',') + '\n';// 添加数据行jsonArray.forEach(item => {const row = headerArray.map(header => {// 处理值中的逗号和换行符let value = item[header] !== undefined ? item[header] : '';if (typeof value === 'string') {// 如果值包含逗号、换行符或双引号，需要用双引号包裹if (value.includes(',') || value.includes('\n') || value.includes('"')) {// 转义双引号value = value.replace(/"/g, '""');value = `"${value}"`;}}return value;});csv += row.join(',') + '\n';});return csv;}</script>
</body>
</html>

1、复制代码保存到文本文件后缀改为.html ，谷歌浏览器打开如下图：

在这里插入图片描述

2、粘贴json数据到输入框，点击转换为CSV然后下载csv文件，转换数据如下图：

在这里插入图片描述

纯html实现的json数据转csv文件

代码如下： <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>JSON转CSV转换器</tit…...

编程日记 2025/5/11 12:07:23

Windows 查看电脑是否插拔过U盘

1、按 “WinR” 组合键打开 “运行” 对话框，输入 “regedit” 并回车，打开注册表编辑器。 2、依次展开HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\USBSTOR注册表项，这里记录了所有已连接过的 USB 设备信息，包括 U 盘&am…...

编程日记 2025/5/11 11:44:36

VB.net序列化和反序列化的使用方法和实用场景

引言相信很多初学编程的人都会提出过这个疑问：“既然我的变量可以存在内存之中，那么是否也可以存在硬盘之中呢” 其实我想回答的是，完全可以而且方法不止一种，而今天讲的是序列化最经典的——二进制序列化由于序列化的部分已…...

编程日记 2025/5/2 5:37:51

kafka学习笔记（四、生产者（客户端）深入研究(二)——消费者协调器与_consumer_offsets剖析）

1.消费者协调器和组协调器如果消费者客户端中配置了多个分配策略，则多消费者的分区分配交由消费者协调器和组协调器来完成，他们之间使用一套组协调协议进行交互。 1.1.在均衡原理将全部消费者分成多个子集，每个消费者组的子集在服务中对…...

编程日记 2025/5/2 5:36:50

stm32基础001(串口)

文章目录通信的基本概念串行通信和并行通信单工，半双工和全双工串口的硬件连接 stm32的串口原理图CPU的芯片手册stm32串口的库函数实现通过串口实现printf函数使用中断实现串口的接收通信的基本概念串行通信和并行通信串行通信一个方向只有一个数据通道&#x…...

编程日记 2025/5/2 5:36:49

5G技术如何提升智能家居体验：让家更聪明，生活更智能

5G技术如何提升智能家居体验：让家更聪明，生活更智能一、引言：智能家居的新纪元近年来，智能家居已经逐渐走入我们的生活，家电、照明、安全设备、环境监控等产品，都在逐步实现智能化，让我们可以…...

编程日记 2025/5/2 5:35:48

在项目中如何对Map List等对象序列化及反序列化

我们知道，在自定义类中，若想完成序列化必须要实现Serializable接口。那么在实现后如何进行序列化呢？ 一.普通对象序列化： 1.首先我们要定义一个序列化所需要的工具类 ObjectMapper //定义序列化所需要的工具类转化机器…...

编程日记 2025/5/2 5:35:48

指针与算法的双人舞：蓝桥杯两道趣味题的降维打击

蓝桥杯奇趣挑战：如何用指针和算法“驯服”无序数组与环形迷宫？ 🎩 博客引言 "你是否有过这样的体验？面对一段看似混乱的数组，像解开一团纠缠的耳机线，想用最优雅的方式让它乖乖听话？又或者…...

编程日记 2025/5/2 5:35:47

C语言指针(2)

目录 1.指针运算 2.const修饰指针 3.野指针我们在上篇文章中初步了解了关于指针的基础内容，包括内存地址以及指针变量类型。这篇我们来讲关于指针的运算以及const修饰指针和野指针相关内容。 1. 指针运算指针的基本运算有三种，分别是: - 指针-…...

编程日记 2025/5/2 5:35:46

使用Python和Pandas实现的Azure Synapse Dedicated SQL pool权限检查与SQL生成用于IT审计

下面是使用 Python Pandas 来提取和展示 Azure Synapse Dedicated SQL Pool 中权限信息的完整过程，同时将其功能以自然语言描述，并自动构造所有权限设置的 SQL 语句： ✅ 步骤 1：从数据库读取权限信息我们从数据库中提取与用户、…...

编程日记 2025/5/9 15:03:04

Python基本语法(控制语句)

#控制语句 Python语言的控制语句和其他编程语言类似，常用的有if…else、while、for语句。案例2一7控制语句第1组代码，说明if-else语句： #1 print(\n1,if) x,y,z10,20,5 if x>y:print(x>y) else:print(x<y)输出结果: 1,if x<…...

编程日记 2025/5/2 5:34:44

Linux btop 使用教程

简介 btop 是一个基于终端的现代系统资源监控器，具有美观的图形界面、响应快、功能丰富等特点。它支持查看 CPU、内存、磁盘、网络、进程，并可以方便地筛选和管理进程。功能总览启动命令： btop界面分为以下几部分： CPU 区域…...

编程日记 2025/5/2 5:34:44

高并发场景下的MySQL生存指南

引言在2025年全球数字经济峰会上，阿里云披露其核心交易系统单日处理请求量突破万亿次，其中MySQL集群承载了78%的OLTP业务。这标志着数据库系统已进入百万级QPS时代，传统优化手段面临三大挑战： 一、硬件与架构优化：构…...

编程日记 2025/5/2 5:34:43

Ethan独立开发产品日报 | 2025-04-30

1. Daytona 安全且灵活的基础设施，用于运行你的人工智能生成代码。 Daytona Cloud重新定义了AI代理的基础设施，具备低于90毫秒的启动时间、原生性能和有状态执行能力，这些是传统云服务无法比拟的。您可以以前所未有的速度和灵活性来创建、管…...

编程日记 2025/5/2 5:34:41

Mysql常用函数解析

字符串函数 CONCAT(str1, str2, …) 将多个字符串连接成一个字符串。 SELECT CONCAT(Hello, , World); -- 输出: Hello WorldSUBSTRING(str, start, length) 截取字符串的子串（起始位置从1开始）。 SELECT SUBSTRING(MySQL, 3, 2); -- 输出: SQ…...

编程日记 2025/5/2 5:33:40

donet使用指定版本sdk

ps:来自微软官方方案,实测可行,就是在项目任意目录下在新建 global.json,并配置sdk版本 SDK 使用最新安装的版本 SDK 命令包括 dotnet new 和 dotnet run。 .NET CLI 必须为每个 dotnet 命令选择一个 SDK 版本。即使在以下情况下，它也会默认使用计算机上安装的最新…...

编程日记 2025/5/2 5:33:40

Android短信监控技术实现：合法合规的远程采集方案

一年经验的全栈程序员，目前头发健在，但不知道能撑多久。该项目已成功部署并稳定运行于企业生产环境，如需个性化定制方案，欢迎联系作者进行深度合作。文章目录前言一、页面设计 1.页面显示 2.代码实现二、具体代码实现 1.添加…...

编程日记 2025/5/2 5:32:38

前端项目实践：打造响应式个人简历与实时天气预报应用

在当今前端开发领域，构建实际项目是提升技能的最佳方式。本文将带你完成两个极具实用价值的前端项目：响应式个人简历页面和天气预报Web应用。这两个项目不仅能够丰富你的作品集，还能帮助你掌握现代前端开发的核心技术。一、响应式个人简历页…...

编程日记 2025/5/2 5:32:38

【C++】extern

本文介绍一些extern在C中的用法声明与定义分离 C程序员应该都知道单一定义规则ODR 在任何一个翻译单元中，只允许存在任何变量、函数、类类型、枚举类型、概念 (自 C20 起) 或模板的一个定义（其中一些可能具有多个声明，但只允许一个定义&a…...

编程日记 2025/5/2 5:32:37

力扣——23合并升序链表

目录 1:题目描述： 2.算法思想： 3.代码展示： 1:题目描述： 给你一个链表数组，每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中，返回合并后的链表。示例 1： 输入&#xff…...

编程日记 2025/5/2 5:32:36

Java 泛型参数问题：‘ResponseData.this‘ cannot be referenced from a static contex

问题与处理策略问题描述 Data AllArgsConstructor NoArgsConstructor public class ResponseData<T> {private Integer code;private String msg;private T data;public static final int CODE_SUCCESS 2001;public static final int CODE_FAIL 3001;public static …...

编程日记 2025/5/10 21:05:24

21 课时精通生成式 AI：微软官方入门指南详解

21课时精通生成式AI：微软官方入门指南详解引言项目概述分析基本信息项目定位与目标核心功能详解1. 全面的课程结构2. 多样化的学习内容3. 技术亮点与创新点安装和使用教程环境要求安装步骤基本使用方法示例代码应用场景和实际价值适用业务场景实际应用价值效益可…...

编程日记 2025/5/2 5:31:34

WPF嵌入webapi服务器，充当微服务角色

WPF嵌入WebAPI服务器实现微服务角色一、方案概述在WPF应用程序中嵌入WebAPI服务器，使其能够同时作为桌面客户端和微服务提供者。这种架构允许WPF应用既作为用户界面，又作为后端服务，适合需要本地处理能力同时又能提供API接口的场景。二、技术选型 WebAPI框架：…...

编程日记 2025/5/2 5:31:34

构建现代分布式云架构的三大支柱：服务化、Service Mesh 与 Serverless

目录前言1. 服务化架构模式：构建可扩展的基础单元1.1 服务化的定义与演进1.2 在分布式云中的价值1.3 面临的挑战 2. Service Mesh 架构：服务通信的治理中枢2.1 什么是 Service Mesh？2.2 功能与优势2.3 在分布式云中的角色2.4 落地难点 3. Se…...

编程日记 2025/5/2 5:30:33

2025华东杯数学建模B题完整分析论文（共36页）（含模型、代码、数据）

2025华东杯数学建模B题完整分析论文摘要一、问题重述二、问题分析三、模型假设四、模型建立与求解 4.1问题1 4.1.1问题1思路分析 4.1.2问题1模型建立 4.1.3问题1代码 4.1.4问题1求解结果 4.2问题2 4.2.1问题2思路分析 4.2.2问题2模型建立 4.2…...

编程日记 2025/5/2 5:30:32

K8S - 零基础掌握 RBAC - 命名空间安全实战

一、为什么需要 RBAC 权限管理？ 真实场景在企业级 K8S 集群中，不同团队共享同一集群，容易发生权限管理问题，例如： 测试人员误删了生产数据库。实习生看到了财务系统的敏感配置。核心需求确保不同用户只能在自…...

编程日记 2025/5/2 5:29:31

OpenGL-ES 学习(13) ---- Shader 编译和程序对象

目录概述创建和编译Shader链接程序对象绘制一个最简单的三角形示例代码概述在本节中，我们提供创建 Shader对象，并且编译链接到一个程序对象的完整流程，主要内容如下： Shader 和程序对象概述创建和编译Shader创建和链接程序对…...

编程日记 2025/5/2 5:29:31

今天的python练习题

目录一、每日一言二、练习题三、效果展示四、下次题目五、总结一、每日一言晚上8点到的，还是会被感动到，有一位列车员同志在检票期间，叫我到列车员专座位上去坐，我很感激他，温暖人心，所以人间填我…...

编程日记 2025/5/2 5:29:30

HarmonyOS应用开发中实现本地化存储的几种方式

Preferences 存储适用于存储简单的键值对数据，如用户设置、配置信息等。其特点是轻量级、使用简单，适合频繁读取和少量更新的场景，数据存储在本地沙盒中，应用重启后数据保持不变。获取 Preferences 实例 ：使用 data…...

编程日记 2025/5/2 5:29:29

【C++指南】vector（三）：迭代器失效问题详解

. 💓 博客主页：倔强的石头的CSDN主页 📝Gitee主页：倔强的石头的gitee主页 ⏩ 文章专栏：《C指南》期待您的关注文章目录一、引言二、reserve 扩容引发的迭代器失效2.1 问题现象2.2 正确实现三、insert 插入引发的…...

编程日记 2025/5/2 5:28:28

Android面试总结之GC算法篇

一、GC 机制核心原理与算法面试题 1：Android 中为什么采用分代回收？分代策略如何优化 GC 效率？ 标准答案： 分代回收基于对象生命周期的差异，将堆分为年轻代（Young Gen）和老年代（Ol…...

编程日记 2025/5/2 5:28:28

驱动开发系列55 - Linux Graphics QXL显卡驱动代码分析（二）显存管理

一：概述前面介绍了当内核检测到匹配的PCI设备后，会调用 qxl_pci_probe 初始化设备，其中会调用qxl_device_init 来初始化设备，为QXL设备进行内存映射，资源分配，环形缓冲区初始化，IRQ注册等操作，本文展开说说这些细节，以及介绍下QXL的显存管理。二：QXL设备初始化细节…...

编程日记 2025/5/2 5:28:27

javaScript——DOM续（六）

滚轮事件在 Web 开发中监听鼠标滚轮事件时，不同浏览器存在差异。下面是对 onmousewheel、DOMMouseScroll 和标准 wheel 事件的完整说明和兼容写法。 🌀 onmousewheel 事件概览 onmousewheel 是早期浏览器（如 IE 和 Chrome）支持…...

编程日记 2025/5/2 5:27:25

MySQL 服务搭建

💢欢迎来到张翊尘的开源技术站 💥开源如江河，汇聚众志成。代码似星辰，照亮行征程。开源精神长，传承永不忘。携手共前行，未来更辉煌💥 文章目录在线安装Ubuntu/Debian更新系统包索引安装 MySQL …...

编程日记 2025/5/2 5:26:23

Eigen的使用

https://github.com/PX4/eigen Eigen在Qt中的配置（博主亲测） 1、Qt中调用 //.pro中-------- INCLUDEPATH \$$PWD/eigen-master//.cpp中------- #include <Eigen/Dense> using namespace Eigen;Matrix2d a; MatrixXd b(2,2); Vector3d v(1,2,3);…...

编程日记 2025/5/2 5:26:23

【云原生】基于Centos7 搭建Redis 6.2 操作实战详解

目录一、前言二、Redis 6.2 安装过程 2.1 下载安装包 2.2 安装包解压 2.3 安装包编译 2.3 安装 2.4 启动redis 2.4.1 前台启动（不推荐） 2.4.2 后启动（推荐） 2.4.3 关闭redis服务 2.4.4 设置客户端连接三、写在最后 …...

编程日记 2025/5/2 5:26:22

《TCP/IP详解卷1：协议》之第九章：IP选路

目录一、IP选路之IP层工作流程二、选路原理三、路由表中的五种不同的标志（flag） 四、路由表的初始化 1、静态路由表初始化 ①、手动配置 ②、默认网关配置 2、动态路由表初始化 ①、路由协议的作用 ②、直接连接网络的自动发现五、没有到达…...

编程日记 2025/5/2 5:26:21

HTTP知识速通

一.HTTP的基础概念首先了解HTTP协议，他是目前主要使用在应用层的一种协议 http被称为超文本传输协议而https则是安全的超文本传输协议本章节的内容首先就是对http做一个简单的了解。 HTTP是一种应用层协议，是基于TCP/IP协议来传递信息的。其中…...

编程日记 2025/5/2 5:25:20

npm命令介绍（Node Package Manager）

文章目录 npm命令全解析简介基础命令安装npm（npm -v检插版本）初始化项目（npm init）安装依赖包（npm install xxx、npm i xxx） 依赖管理精解依赖类型区分（生产环境依赖dependencies、开发环境依赖…...

编程日记 2025/5/2 5:25:20

在 Windows 上启用 Telnet 命令

在 Windows 上启用打开 Telnet 命令 Telnet 是一种用于远程访问和管理计算机的协议。尽管存在安全漏洞，Telnet 仍然被广泛用于初始网络硬件配置、远程访问、端口测试等任务。在 Windows 10 和 11 上，可以通过多种方法启用 Telnet 客户端。使用控制面板…...

编程日记 2025/5/2 5:25:19

网络安全零基础培训 L1-9 PHP连接MySQL数据库

使用MySQLi扩展 MySQLi 是 “MySQL Improved Extension” 的缩写，它是 PHP 用于与 MySQL 数据库进行交互的扩展。 step1：连接数据库 <?php// 定义数据库服务器的地址，通常 localhost 表示本地服务器$servername "服务器地址&quo…...

编程日记 2025/5/2 5:25:18

Python生活手册-文件二进制：从快递柜到生鲜冷链的数据保鲜术

一、快递柜与冷链运输：两种存取哲学 1. 普通快递柜（文本模式） 日常存取包裹的智能快递柜就像文本模式，系统会自动处理包裹的包装： with open(快递单.txt, r, encodingutf-8) as 快递柜:包裹内容快递柜.read() # …...

编程日记 2025/5/2 5:25:17

CUDA从入门到放弃

1 CUDA简介 GPU为图形处理器, 也是显卡的“大脑”显卡集成了GPU, 显存和其他电路的硬件GPU: 计算密集型CPU: 逻辑流控制GPU性能指标: 核心数GPU显存容量GPU计算峰值显存带宽 GPU不能单独计算, CPUGPU组成异构计算架构CPU起到控制作用, 一般成为主机(Host), GPU可以看作CPU的协…...

编程日记 2025/5/2 5:24:16

Golang多人在线坦克对战游戏(帧同步)

以下是一个简化但完整的同步帧游戏示例——实现一个多人在线坦克对战游戏。代码分为服务器和客户端两部分，使用UDP协议通信。我们将重点讲解核心同步机制。项目结构 sync-frame-game/ ├── server/ │ ├── main.go # 游戏服务器主逻辑 │ └── game_stat…...

编程日记 2025/5/2 5:24:15

MySQL | DQL语句-连接查询

MySQL | DQL语句-连接查询 🪄个人博客：https://vite.xingji.fun 什么是连接查询从一张表中查询数据称为单表查询。从两张或更多张表中联合查询数据称为多表查询，又叫做连接查询。什么时候需要使用连接查询？ 比如这样的需求&…...

编程日记 2025/5/2 5:24:14

JVM——Java 虚拟机是如何加载 Java 类的？

引入在 Java 世界的底层运作中，类加载机制扮演着一个既神秘又关键的角色。它就像是一个精心设计的舞台幕后 machinery，确保了 Java 程序能够顺利运行。今天，我们就深入探索 Java 虚拟机（JVM）是如何加载 Java 类的。 …...

编程日记 2025/5/10 4:00:45

Sigmoid函数导数推导详解

Sigmoid函数导数推导详解在逻辑回归中，Sigmoid函数的导数推导是一个关键步骤，它使得梯度下降算法能够高效地计算。 1. Sigmoid函数定义首先回顾Sigmoid函数的定义： g ( z ) 1 1 e − z g(z) \frac{1}{1 e^{-z}} g(z)1e−z1 2. 导…...

编程日记 2025/5/2 5:23:11