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

使用 JavaScript 实现数据导出为 Excel 和 CSV 文件

article 2025/10/7 8:40:33

在 Web 开发中，经常会遇到需要将数据导出为文件的需求，例如将数据导出为 Excel 或 CSV 文件。今天，我们就来探讨如何使用 JavaScript 实现这一功能。

一、实现思路

我们通过 HTML 创建一个按钮，点击按钮时，触发 JavaScript 函数，将数据转换为 Excel 或 CSV 文件格式，并生成可下载的链接。

效果图：

二、代码实现

HTML 部分：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery-3.7.1.min.js"></script><title></title><style>.content {width: 300px;display: flex;justify-content: space-around;}.inport {background-color: skyblue;width: 100px;font-weight: 600;font-size: 20px;}.inport:hover {background-color: azure;cursor: pointer;}</style>
</head><body><div class="content"><h1>导出数据：</h1><button class="inport">一键导出</button></div><script>// 具体实现代码在下方</script>
</body></html>

在这个 HTML 结构中，我们定义了一个按钮，用于触发数据导出操作，并设置了相应的样式。

JavaScript 部分：

$('.inport').click(function () {// 假设这是从接口获取的数据const jsonData = [{name: '张三',tel: 15836333325,email: '1903333356@qq.com'},{name: '李四',tel: 15833338325,email: '19033333@qq.com'},{name: '测试',tel: 158333333325,email: '测试.com'}];// 导出为Excel文件// 列标题let str = '<tr><td align="center">姓名</td><td>电话</td><td align="center">邮箱</td></tr>';// 循环遍历，每行加入tr标签，每个单元格加td标签for (let i = 0; i < jsonData.length; i++) {str += '<tr>';for (const key in jsonData[i]) {// 增加\t为了不让表格显示科学计数法或者其他格式str += `<td>${jsonData[i][key] + '\t'}</td>`;}str += '</tr>';}const worksheet = 'Sheet1'; // Worksheet名const uri = 'data:application/vnd.ms-excel;base64,';// 输出base64编码const base64 = (s) => window.btoa(unescape(encodeURIComponent(s)));// 下载的表格模板数据const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Conten-Type" content="text/html;charset=utf-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table cellpadding="100">${str}</table></body></html>`;// 获取当前日期const now = new Date();const year = now.getFullYear();const month = String(now.getMonth() + 1).padStart(2, '0');const day = String(now.getDate()).padStart(2, '0');const dateString = `${year}-${month}-${day}`;const link = document.createElement("a");link.href = uri + base64(template); //下载模板// 添加日期到文件名link.download = `数据表_${dateString}.xls`;link.click();// 导出为CSV文件// 列标题，逗号隔开，每一个逗号就是隔开一个单元格let str = `姓名,电话,邮箱\n`;for (let i = 0; i < jsonData.length; i++) {for (const key in jsonData[i]) {str += `(${jsonData[i][key] + '\t'},`;     // 增加\t为了不让表格显示科学计数法或者其他格式}str += '\n';}const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); // encodeURIComponent解决中文乱码const link = document.createElement("a"); // 通过创建a标签实现link.href = uri;// 添加日期到文件名link.download = `json数据表_${dateString}.csv`;link.click();
});

在上述 JavaScript 代码中，我们首先定义了要导出的数据jsonData。然后分别实现了将数据导出为 Excel 和 CSV 文件的功能。

对于 Excel 文件，我们构建了一个 HTML 表格模板，将数据填充到表格中，然后将其转换为 Base64 编码，生成可下载的链接。

对于 CSV 文件，我们将数据按照 CSV 格式拼接成字符串，进行编码后生成可下载的链接。

三、总结

通过以上代码，我们实现了在 Web 页面中点击按钮将数据导出为 Excel 和 CSV 文件的功能。在实际应用中，我们可以根据具体需求对数据格式和文件名称进行调整，以满足不同的业务场景。希望这篇博客对你有所帮助，谢谢阅读！

使用 JavaScript 实现数据导出为 Excel 和 CSV 文件

在 Web 开发中，经常会遇到需要将数据导出为文件的需求，例如将数据导出为 Excel 或 CSV 文件。今天，我们就来探讨如何使用 JavaScript 实现这一功能。一、实现思路我们通过 HTML 创建一个按钮，点击按钮时，触发 Java…...

编程日记 2025/10/4 15:11:38

eNSP中路由器RIP协议配置完整实验实验和命令解释

一、实验拓扑二、配置命令 R1配置并先测试一下连通性 R1、R2和R3接口配置完后再测试连通性，直连路由可通启动RIP进程，宣告直连网络查看路由表，测试连通性环回接口配置三、命令解释及注意事项配置命令逐行解释 system-view: 从用户视…...

编程日记 2025/10/4 14:11:13

密码学--AES

一、实验目的 1、完成AES算法中1轮加密和解密操作 2、掌握AES的4个基本处理步骤 3、理解对称加密算法的“对称”思想二、实验内容 1、题目内容描述 （1）利用C语言实现字节代换和逆向字节代换，字节查S盒代换 （2）利…...

编程日记 2025/10/3 19:18:25

Vue项目中实现自定义连线图

需求描述在vue项目中实现由自定义块元素组成的连线图。效果图实现思路 Leader-Line 是一个用于 Web 的轻量级 JavaScript 库，专为创建从一个元素指向另一个元素的引导线而设计。它提供了高度自定义的能力，使得开发者能够轻松地在网页上实现各种指引用…...

编程日记 2025/10/5 22:11:41

1.问题背景，nginx日志过大不好删除 [rootlocalhost cron.daily]# cd /lk/nginx/log/ [rootlocalhost log]# ll 总用量 2386188 -rw-r--r--. 1 root root 2078699697 5月 9 13:02 access.log -rw-r--r--. 1 root root 11138 5月 6 10:28 error.log [rootloc…...

编程日记 2025/6/17 18:17:23

C++编程语言：标准库：标准库概观(Bjarne Stroustrup)

第30章标准库概观(Standard-Library Overview) 目录 30.1 引言 30.1.1 标准库设施 30.1.2 设计约束 30.1.3 描述风格 30.2 头文件 30.3 语言支持 30.3.1 对initializer_list的支持 30.3.2 对范围for的支持 30.4 异常处理 30.4.1 异常 30.4.1…...

编程日记 2025/10/2 22:36:22

独立自主的网络浏览器——Ladybird

独立自主的网络浏览器——Ladybird 随着互联网技术的飞速发展，浏览器作为人们探索网络世界的窗口，其技术创新和安全措施至关重要。然而，市场上绝大多数浏览器都是基于现有的成熟引擎进行开发，如何创新突破，成为一个独…...

编程日记 2025/6/9 22:42:58

Shiro（八）：JWT介绍

1、什么是JWT？ JWT（JSON Web Token，JSON Web令牌）是一种开放标准（RFC 7519），用于在网络应用环境间安全地传递声明（claims）作为JSON对象；JWT会按指定的加密算…...

编程日记 2025/10/3 13:13:46

【HDLBits刷题】Verilog Language——1.Basics

目录一、题目与题解 1.Simple wire（简单导线） 2.Four wires（4线） 3.Inverter（逆变器（非门）） 4.AND gate （与门） 5. NOR gate （或非门&am…...

编程日记 2025/9/22 23:34:26

SCDN是什么？

SCDN是安全内容分发网络的简称，它在传统内容分发网络（CDN）的基础上，集成了安全防护能力，旨在同时提升内容传输速度和网络安全性。 SCDN的核心功能有： DDoS防御：识别并抵御大规模分布式拒绝服务…...

编程日记 2025/10/2 15:35:55

Python 常用内置函数详解（十）：help()函数——查看对象的帮助信息

目录一、语法参考二、示例一、语法参考 help() 函数的语法格式如下： 参数说明： request：可选参数，要查看其帮助信息的对象，如类、函数、模块、数据类型等；返回值：返回对象的帮助信息。二…...

编程日记 2025/10/6 20:51:56

【Python系列】Python 中的 HTTP 请求处理

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/10/5 13:14:01

辉芒微离线烧录器“文件格式错误”问题解决

最近在使用辉芒微离线烧录器烧录程序时，提示“文件格式错误”，记录一下解决方法。一、问题现象经过多次尝试和排查，发现以下几种情况： 情况一：使用离线烧录器导入固件1（boot程序）&#xff0c…...

编程日记 2025/10/7 3:33:52

buck和boost总结

目录 1. 基本概念与原理 2. 工作模式 3. 典型应用场景 4. Buck-Boost电路：升降压结合 5. 核心区别与选择 1. 基本概念与原理 Buck电路（降压电路） 通过开关器件（如MOSFET）周期性地导通和关断，控制电感充…...

编程日记 2025/6/17 4:45:22

Ansible内置模块之package

原创：厦门微思网络 Ansible内置模块之 package ansible.builtin.package 模块用于管理基于 Linux 系统上的软件包。它是一个通用模块，支持多个包管理器（如 apt、yum、dnf、zypper 等），可以安装、更新和删除软件包。其…...

编程日记 2025/6/11 8:15:13

RISC-V AIA SPEC学习（五）

第六章 Interrupts for Virtual Machines(VS Level) 核心内容 1.VS级别外部中断支持：客户中断文件（Guest Interrupt File）：虚拟机的每个vCPU拥有独立的IMSIC中断文件，允许直接接收设备MSI。vstopi CSR：类似stopei，用于虚拟机内部处理最高优先级中…...

编程日记 2025/6/24 23:26:59

【软件设计师：体系结构】15.计算机体系结构概论

计算机体系结构是指计算机系统的功能和属性，是程序员所看到的计算机的属性。它主要研究计算机体系的概念性结构和功能特性，包括指令集、数据类型、存储器寻址技术、I/O机制等。例如，计算机是否具备乘法指令的功能，这是一个体系结构的问题。一、机内代码及运算一、数的进…...

编程日记 2025/9/23 8:49:07

CVE-2025-24813：Apache Tomcat RCE 漏洞分析

CVE-2025-24813 是 Apache Tomcat 中的一个严重远程代码执行 (RCE) 漏洞，源于路径等效缺陷，允许攻击者绕过安全约束并远程执行任意代码。 CYFIRMA 的研究发现了一些活跃的漏洞利用，一些 PoC 漏洞在地下论坛上流传。攻击者利用基于 HTTP PUT 的任意文件上传、NTFS 连接漏洞利…...

编程日记 2025/6/12 8:11:00

vscode 配置doxygen注释和snippet

vscode 配置doxygen注释和snippet Doxygen的C/C注释原则基于Doxygen的C/C注释原则标注总述 1.文件头标注 2. 命名空间标注 3. 类、结构、枚举标注 4. 函数注释原则 5. 变量注释 6. 模块标注 7. 分组标注指令表格命令字段名语法file文件名file [< name >]brief简介b…...

编程日记 2025/10/2 22:36:35

分析 Docker 磁盘占用

以下是分析 Docker 磁盘占用的详细步骤和工具指南，帮助开发者快速定位和清理冗余数据： 1. 查看 Docker 磁盘使用概览 docker system df 输出说明： TYPE TOTAL ACTIVE SIZE RECLAIMABLE Images 15 …...

编程日记 2025/7/15 3:52:02

HarmonyOS NEXT 免费无广告看电影app：从想法到实现的经验总结

学习一项新技能，最好也是最快的方法就是动手实战。学习鸿蒙也一样，给自己定一个小目标，直接找项目练,这样进步是最快的。最近，我在网上看到360周董的一句话：“想干什么就去干，干得烂总比不干强！…...

编程日记 2025/10/2 22:36:37

代码随想论图论part06冗余连接

图论part06 冗余连接代码随想录冗余边就是已经边已经在并查集里了，从图的角度来说构成了环（冗余连接2要用到这个概念） 代码其他部分为：并查集初始化，查根，判断是否在集合里，加入集合冗余…...

编程日记 2025/10/3 11:58:00

MySQL 数据库操作

目录一、 MySQL 数据库介绍二、 MySQL 库操作 1. 系统数据库 2. 数据库操作三、 MySQL 表操作 1. 表介绍 2. 查看表 3. 创建表 4. 查看表结构 5. 修改表 6. 删除表四、 MySQL 数据操作 4.1 单表查询 4.2 多表查询一、 MySQL 数据库介绍数据库目前标准的指令…...

编程日记 2025/6/26 18:41:37

企业高性能WEB服务器—Nginx

Nginx介绍 Nginx是一款轻量级的网页服务器、反向代理服务器以及电子邮件代理服务器。具有高并发（特别是静态资源）、占用系统资源少的特性。它不仅是Web服务软件，还具有反向代理负载均衡功能和缓存服务功能具备如下基本特性可针对静态资…...

编程日记 2025/9/19 8:51:54

C++跨平台开发实践：深入解析与常见问题处理指南

一、跨平台开发基础架构设计 1.1 跨平台架构的核心原则分层设计模式： 平台抽象层(PAL)：将平台相关代码集中管理核心逻辑层：完全平台无关的业务代码平台实现层：针对不同平台的特定实现代码组织最佳实践： pro…...

编程日记 2025/7/14 0:16:23

Python MNE-Python 脑功能磁共振数据分析

一、什么是Python MNE-Python 脑功能磁共振数据分析为大脑功能磁共振成像数据分析工具，致力于为神经科学研究提供便捷、高效的数据分析处理工具。MNE-Python提供了处理和分析脑电图（EEG）、…...

编程日记 2025/9/20 9:18:09

DevExpressWinForms-AlertControl-使用教程

文章目录 AlertControl-使用教程一、将 AlertControl 添加到 Form二、编辑 AlertControl 的 HtmlTemplateHTML Template Editor介绍编辑HTML Template 三、使用AlertControl弹出AlertAlert中的按钮事件获取 Alert 标题等信息向Alert传递参数总结源码 AlertControl-使用教程一…...

编程日记 2025/10/3 22:10:17

SurfSense开源程序是NotebookLM / Perplexity / Glean的开源替代品，连接到外部来源，如搜索引擎

一、软件介绍文末提供程序和源码下载虽然 NotebookLM 和 Perplexity 等工具令人印象深刻，并且对于对任何主题/查询进行研究都非常有效，但 SurfSense 通过与你的个人知识库集成来提升这种能力。它是一个高度可定制的 AI 研究代理，连接到外…...

编程日记 2025/9/2 19:45:32

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】电商数据分析案例-9.4 可视化报告输出

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲电商数据分析实战：基于PostgreSQL的可视化报告生成全流程9.4 可视化报告输出9.4.1 可视化报告设计框架9.4.1.1 报告目标与受众9.4.1.2 数据准备与指标体系 9.4.2…...

编程日记 2025/10/4 21:57:00

屎上雕花系列-2nd

以下为“屎上雕花”的尝试2nd 使用Deepseek扩容而来，我竟然没有找到明显的错误，太强大了，工作改变生活了 LeCroy 以太网与 SAN 网络测试解决方案硬件平台一：Xena 以太网流量生成器 Xena 以太网流量生成器是一款高性能的网络测…...

编程日记 2025/10/5 16:10:18

使用 JavaScript 实现数据导出为 Excel 和 CSV 文件

在 Web 开发中，经常会遇到需要将数据导出为文件的需求，例如将数据导出为 Excel 或 CSV 文件。今天，我们就来探讨如何使用 JavaScript 实现这一功能。

一、实现思路

二、代码实现

三、总结

相关文章：

使用 JavaScript 实现数据导出为 Excel 和 CSV 文件

eNSP中路由器RIP协议配置完整实验实验和命令解释

密码学--AES

Vue项目中实现自定义连线图

linux中的日志分割

C++编程语言：标准库：标准库概观(Bjarne Stroustrup)

独立自主的网络浏览器——Ladybird

Shiro（八）：JWT介绍

【HDLBits刷题】Verilog Language——1.Basics

SCDN是什么？

Python 常用内置函数详解（十）：help()函数——查看对象的帮助信息

【Python系列】Python 中的 HTTP 请求处理

辉芒微离线烧录器“文件格式错误”问题解决

buck和boost总结

Ansible内置模块之package

RISC-V AIA SPEC学习（五）

【软件设计师：体系结构】15.计算机体系结构概论

CVE-2025-24813：Apache Tomcat RCE 漏洞分析

vscode 配置doxygen注释和snippet

分析 Docker 磁盘占用

HarmonyOS NEXT 免费无广告看电影app：从想法到实现的经验总结

代码随想论图论part06冗余连接

MySQL 数据库操作

企业高性能WEB服务器—Nginx

C++跨平台开发实践：深入解析与常见问题处理指南

Python MNE-Python 脑功能磁共振数据分析

DevExpressWinForms-AlertControl-使用教程

SurfSense开源程序是NotebookLM / Perplexity / Glean的开源替代品，连接到外部来源，如搜索引擎

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】电商数据分析案例-9.4 可视化报告输出

屎上雕花系列-2nd