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

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

news 来源：原创 2025/8/23 0:53:56

在 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/8/23 0:53:56

设一个测试情境，新用户注册后显示的名字不完整，测试思路是怎么样的？

问题分析：新用户注册后显示名称不完整典型表现：用户注册时输入"张三丰"，系统仅显示"张"或"张三"等不完整信息一、测试排查思维导图二、详细测试方案 1. 前端测试输入验证：测试不同长度名称（1字符/10字符/50字符）测试含空格名称（如…...

编程日记 2025/8/23 0:49:46

NHANES指标推荐：ZJU index

文章题目：Association between ZJU index and gallstones in US adult: a cross-sectional study of NHANES 2017-2020 DOI：10.1186/s12876-024-03553-9 中文标题：ZJU指数与美国成年人胆结石的关联：2017-2020年NHANES横断面研究发…...

编程日记 2025/8/22 18:55:51

数据存储——高级存储之PV和PVC

一、概述 PV （ Persistent Volume ）是持久化卷的意思，是对底层的共享存储的一种抽象。一般情况下 PV 由 kubernetes 管理员进行创建和配置，它与底层具体的共享存储技术有关，并通过插件完成与共享存储的对接。 PVC &a…...

编程日记 2025/8/23 0:51:40

Astro Canvas 数据中心→设备一览大屏操作指南

✅ Astro Canvas 数据中心→设备一览大屏操作指南 📌 目标通过API连接器 → 转换器 → 数据源 → 数据集 → Astro大屏设计，展示从 IoTDA 获取的设备影子数据，并在 Astro 大屏中以设备一览形式可视化展示（如设备ID、温度、湿度、烟雾浓度等状态）。 🔁 一、整体流程概…...

编程日记 2025/8/23 0:49:46

Cisco NDO - Nexus Dashboard Orchestrator

目录一、什么是 Cisco NDO？二、ND vs. NDO? 三、NDO vs. NDFC 四、NDO 用例：一、什么是 Cisco NDO？ Nexus Dashboard Orchestrator（NDO）可通过单一界面，实现跨多个数据中心的一致性网络与策略编排、可扩展性与灾难恢复等。当在本地、多种私有云或公有云中同时运…...

编程日记 2025/8/22 11:48:12

Android 控件CalendarView、TextClock用法

一 UI代码 <?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto…...

编程日记 2025/8/23 0:51:39

Socket 编程 TCP

Socket 编程 TCP TCP socket API 详解V1 - Echo ServerV2 - Echo Server 多进程版本V3 - Echo Server 多线程版本V4 - Echo Server 线程池版本多线程远程命令执行v5 引入线程池版本翻译 TCP socket API 详解 socket(): socket()打开一个网络通讯端口,如果成功的话,就像 open…...

编程日记 2025/8/22 3:05:46

信息系统项目管理师-软考高级（软考高项）2025最新（七）

个人笔记整理---仅供参考项目立项管理 7.1项目建议与立项申请项目建议书内容必背！ 7.2项目可行性研究项目可行性研究必考 7.3项目的评估与决策...

编程日记 2025/8/22 11:48:00

Qt中的UIC

Qt中的UIC(User Interface Compiler, 用户界面编译器)：读取由Qt Widgets Designer生成的XML格式(.ui)文件并创建相应的C头文件或Python源文件。如将mainwindow.ui文件生成ui_mainwindow.h。 uic.exe位置在6.8.0\msvc2019_64\bin ，其支持的输入参数如下所…...

编程日记 2025/8/22 10:09:17

【MATLAB例程】基于RSSI原理的Wi-Fi定位程序，N个锚点（数量可自适应）、三维空间，轨迹使用UKF进行滤波，附代码下载链接

本文所述程序实现了一种基于信号强度（RSSI）的Wi-Fi定位算法，并结合无迹卡尔曼滤波（UKF）对动态目标轨迹进行滤波优化。代码支持自适应锚点数量，适用于三维空间定位，可模拟目标运动、信号噪声及非…...

编程日记 2025/8/23 0:53:55

vulkanscenegraph显示倾斜模型(6.5)-vsg::DatabasePager

前言上章深入分析了帧循环过程中，多线程下的记录与提交机制。本章将分析vsg::DatabasePager在更新场景图过程中的作用，进一步揭露vsg中场景图管理机制，并通过分析代码，详细解释vsg中场景图管理机制中的节点添加、节点删除、节点加…...

编程日记 2025/8/23 0:49:47

利用 Python pyttsx3实现文字转语音（TTS）

今天，我想跟大家分享如何利用 Python 编程语言，来实现文字转换为语音的功能，也就是我们常说的 Text-to-Speech (TTS) 技术。你可能会好奇，为什么学习这个？想象一下，如果你想把书本、文章、杂志的内容转换…...

编程日记 2025/8/23 0:47:29

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】5.1 描述性统计分析（均值/方差/分位数计算）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 5.1 描述性统计分析：均值、方差与分位数计算实战5.1.1 数据准备与分析目标数据集介绍分析目标 5.1.2 均值计算：从整体到分组分析总体均值计算加权均值…...

编程日记 2025/8/20 6:00:34

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】5.4 数据抽样（简单随机抽样/分层抽样）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL数据分析实战：数据抽样核心技术解析5.4 数据抽样：从简单随机到分层策略的深度实践5.4.1 简单随机抽样：概率均等的基础抽样方法…...

编程日记 2025/8/20 16:04:50

时间同步服务核心知识笔记：原理、配置

一、时间同步服务在 Linux 系统中，准确的时间至关重要。对于服务器集群，时间同步确保各节点间数据处理和交互的一致性，避免因时间差异导致的事务处理错误、日志记录混乱等问题。在分布式系统中，时间同步有助于协调任务调度、数据…...

编程日记 2025/8/20 16:04:48

Leetcode刷题记录32——搜索二维矩阵 II

题源：https://leetcode.cn/problems/search-a-2d-matrix-ii/description/?envTypestudy-plan-v2&envIdtop-100-liked 题目描述： 思路一： 💡 解题思路：利用矩阵有序特性双指针法（Z 字形搜索&…...

编程日记 2025/8/20 16:04:46

【最新Python包管理工具UV的介绍和安装】

介绍 uv是一个非常快的 Python 包安装程序和 pip 解析器，用 Rust 编写，设计为pip-tools的直接替代品。以下是官网给出的UV与其他包管理工具解决依赖（左）和安装包（右）的对比图。可以看出UV是一个极快的 P…...

编程日记 2025/8/20 16:04:45

第二章-猜数游戏

猜数游戏纸上得来终觉浅，绝知此事要躬行。实践才能出真知，因此本文内容将通过一个小项目快速帮我们上手Rust语言。其中可能会出现一些目前还不是很了解的知识，但没事，后续通过学习我们会慢慢了解的，现在我们先体会一…...

编程日记 2025/8/20 16:04:43

Go小技巧易错点100例（二十九）

随着 Go 语言的不断迭代，新版本带来了许多实用的标准库函数，使得代码更加简洁、可读性更强。本篇文章主要介绍 Go 1.21 版本中的一些新特性，涵盖可变类型比较、slice 最大值与最小值、map 转换为 slice 以及 map 合并等常见场景&#xff0c…...

编程日记 2025/8/20 14:20:22

游戏开发的TypeScript(5)TypeScript的类型转换

TypeScript的类型转换游戏开发中，事件经常会携带一些数据，而这些数据会做类型上的转化，在这种情况下，类型转换（Type Assertion）能够让你手动把某个值指定为特定类型。这在 TypeScript 无法自动推断出正确…...

编程日记 2025/8/20 16:04:39

旋转图像（中等）

借助辅助矩阵来翻转： 第i行第j列的元素会出现在新矩阵的第j行倒数第i列。 class Solution {public void rotate(int[][] matrix) {int n matrix.length;int[][] matrix_new new int[n][n];for (int i 0; i < n; i) {for (int j 0; j < n; j) {matrix_ne…...

编程日记 2025/8/20 16:04:38

慢sql处理流程和常见案例

思维导图: 在 MySQL 数据库管理中，慢查询是影响系统性能的常见痛点。随着 MySQL 8 版本的普及，其新增特性（如 CTE、隐藏索引、JSON 格式执行计划等）为慢查询优化提供了更强大的工具。本文结合 MySQL 8 的特性，通过代码…...

编程日记 2025/8/19 23:00:19

Kubernetes控制平面组件：Controller Manager 之内置Controller详解

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/8/19 19:15:54

E-R图作业

1.一个图书馆借阅管理数据库要求提供下述服务： （１）可随时查询书库中现有书籍的品种、数量与存放位置。所有各类书籍均可由书号惟一标识。 （２）可随时查询书籍借还情况，包括借书人单位…...

编程日记 2025/8/20 16:04:31

debuginfo详解

debuginfo 是 Linux 系统中存储调试符号和源代码信息的特殊软件包，用于分析内核或用户态程序的崩溃转储文件（如 vmcore、coredump）。它在调试复杂问题（如内核崩溃、程序段错误）时至关重要。以下是其核心作用、安装方法…...

编程日记 2025/8/20 16:04:29

Android学习总结之GetX库篇（场景运用）

状态管理在一个复杂的 Flutter 应用里，怎样借助 GetX 管理多个相互关联的状态，并且保证代码的可维护性和性能？ 考察点：对 GetX 状态管理的深入理解，以及在复杂场景下运用它的能力。解答思路： 采用模块…...

编程日记 2025/8/20 16:04:27

android-ndk开发(5): 编译运行 hello-world

android-ndk开发(5): 编译运行 hello-world 2025/05/05 1. 概要 hello-world 是每一门语言的第一个样例程序， 跑通它， 在一段时间内你会相当顺畅： 可以边学边实验， 根据运行结果得到反馈。而对于 android-ndk 开发而言&#…...

编程日记 2025/8/21 20:34:58

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】6.1 客户分群分析（RFM模型构建）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL数据分析实战：RFM模型构建实现客户分群分析6.1 客户分群分析——RFM模型构建6.1.1 RFM模型核心指标解析6.1.2 数据准备与清洗规范数据表结构设计数据清…...

编程日记 2025/8/20 16:04:23

stm32之TIM定时中断详解

目录 1.引入1.1 简介1.2 类型1.2.1 基本定时器1.2.2 通用定时器1. 触发控制单元 (Trigger Control Unit)2. 输入捕获单元 (Input Capture Unit)3. 输出比较单元 (Output Compare Unit)4. CNT 计数器5. 自动重装载寄存器 (ARR)6. 预分频器 (PSC)7. 中断与 DMA 事件8. 刹车功能 (…...

编程日记 2025/8/22 3:05:33

【Hive入门】Hive安全管理与权限控制：用户认证与权限管理深度解析

目录引言 1 Hive安全管理体系概述 2 Hive用户认证机制 2.1 Kerberos集成认证 2.1.1 Kerberos基本原理 2.1.2 Hive集成Kerberos配置步骤 2.1.3 Kerberos认证常见问题排查 2.2 LDAP用户同步 2.2.1 LDAP协议概述 2.2.2 Hive集成LDAP配置 2.2.3 LDAP与Hive用户同步架构…...

编程日记 2025/8/20 16:04:20

解决DNS劫持问题

什么是DNS劫持？ DNS劫持（DNS Hijacking）是指通过篡改DNS配置，将用户的域名解析请求引导到恶意服务器的攻击方式。这种攻击常见于恶意软件、路由器漏洞或DNS配置被修改的情况下。攻击者通过这种方式控制了用户访问的网站&#xff…...

编程日记 2025/8/22 10:47:21

android-ndk开发(1): 搭建环境

android-ndk开发(1): 搭建环境 2025/05/05 1. 目的写一些 C/C 代码， 例如 cv 基础算法， 并交叉编译到 android 平台。不涉及 JNI、 Java、 Kotlin， 暂不涉及 rust。基本上能适用于华为鸿蒙的 ohos ndk。那么， 为了完成交叉…...

编程日记 2025/8/22 11:11:55

力扣面试150题-- 翻转二叉树

Day 41 题目描述做法 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right…...

编程日记 2025/8/22 5:45:11

开源模型应用落地-qwen模型小试-Qwen3-8B-推理加速-vLLM（一）

一、前言随着大语言模型的参数规模持续膨胀，如何在有限算力下实现高效推理成为行业焦点。阿里云推出的Qwen3-8B，凭借其卓越的语言理解与生成能力，已在多个基准测试中展现竞争力。而vLLM框架作为大模型部署的“加速器”，通过PagedAttention实现内存的高效管理，并支持连续批…...

编程日记 2025/8/21 21:47:47

brep2seq kaggle安装 micromamba conda环境

https://github.com/zhangshuming0668/Brep2Seq Micromamba Installation — documentation !curl -Ls https://micro.mamba.pm/api/micromamba/linux-64/latest | tar -xvj bin/micromamba A Synthetic CAD Models Dataset for Deep Learning kaggle只有20g，等我有…...

编程日记 2025/8/20 16:04:11

钩子函数和参数：Vue组件生命周期中的自定义逻辑

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/8/20 1:22:44

SpringBoot企业级开发之【文件上传】

看一下我们的需求： 接口文档： 分析思路： 现在我们先实现后端先： 实操： 一.存储到本地磁盘： 1.Controller 创建一个FileUploadController类 package org.huangyingyuan.controller;import org.huangyingyu…...

编程日记 2025/8/22 4:45:18

Linux系统安装PaddleDetection

一、安装cuda 1. 查看设备先输入nvidia-smi，查看设备支持的最大cuda版本，选择官网中支持的cuda版本 https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/conda/linux-conda.html 2. 下载CUDA并安装使用快捷键…...

编程日记 2025/8/22 23:53:38

JVM 内存结构全解析

带你深入 JVM 内存结构，搞懂运行时数据区到底是怎么回事 JVM 的内存结构到底长什么样？程序计数器、虚拟机栈、堆、方法区、直接内存到底有什么用？这篇文章将从实际运行角度出发，用一篇文章彻底讲透 JVM 的运行时数据区。一、为什么你必须搞懂 JVM 内存结构？在一次线上…...

编程日记 2025/8/20 16:04:04

K8S node ARP 表爆满如何优化

当 Kubernetes 节点的 ARP 表爆满时，可能会导致网络通信故障。以下是针对该问题的优化策略和解决方案： 一、ARP 表爆满的危害网络不通：新的 ARP 请求无法被处理，导致数据包无法转发。性能下降：ARP 表查找效率降低&a…...

编程日记 2025/8/20 16:04:02

SpringMVC——第7章:HttpMessageConverter

一、HttpMessageConverter HttpMessageConverter是Spring MVC中非常重要的一个接口。翻译为：HTTP消息转换器。该接口下提供了很多实现类，不同的实现类有不同的转换方式。 1.什么是HTTP消息 HTTP消息其实就是HTTP协议。HTTP协议包括请求协议和响应协议。…...

编程日记 2025/8/22 14:25:54

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】4.4 异构数据源整合（CSV/JSON/Excel数据导入）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL异构数据源整合：CSV/JSON/Excel数据导入全攻略4.4 异构数据源整合：多格式数据导入实战4.4.1 CSV数据导入：高效批量处理4.4.1.1…...

编程日记 2025/8/20 16:03:58

在macOS上安装windows系统

使用Boot Camp 1. 准备工作：确认Mac满足Boot Camp系统要求，准备好Windows安装光盘或ISO映像文件，以及一个至少8GB的空白USB闪存驱动器用于保存驱动程序。 2. 打开Boot Camp助理：在“应用程序”文件夹的“实用工具”中找到“Boot…...

编程日记 2025/8/20 16:03:57

最长回文子串(动规 + 中心拓展)

目录 [BM73 最长回文子串](https://www.nowcoder.com/practice/b4525d1d84934cf280439aeecc36f4af?tpId295&tags&title&difficulty0&judgeStatus0&rp0&sourceUrl/exam/oj?questionJobId10&subTabNameonline_coding_page)1. 动态规划(1)状态表示:…...

编程日记 2025/8/20 16:03:55

学习海康VisionMaster之亮度测量

一：进一步学习了今天学习下VisionMaster中的亮度测量：这个和前面学习的都不一样了，这个是测量ROI区域内的平均亮度等 1：什么是亮度测量？ 我们工业上用的相机里面有一个感光芯片（CCD/CMOS）&…...

编程日记 2025/8/20 14:42:35

LeetCode 238：除自身以外数组的乘积（Java实现）

文章目录 **题目描述**解决思路1. 两次遍历法（左右乘积法）2. 核心思想 Java代码实现复杂度分析示例说明步骤分解注意事项总结题目描述给定一个整数数组 nums，返回一个数组 answer，其中 answer[i] 等于 nums 中除 nums[i] 之外…...

编程日记 2025/8/20 18:36:14

LintCode第23题-判断数字与字母字符第145题-大小写转换第283题-三数之中的最大值

思路: 直接使用包装类的方法来判断比如: isLetter(char c)判断是否是字母（包括大小写、非英语字母也行） isDigit(char c)判断是否是数字（0~9） isLetterOrDigit(char c)是否是字母或数字（等价于 isLetter isLower…...

编程日记 2025/8/20 12:17:03

Visual Studio 项目转Qt项目

1. 先确保qmake 和 minGW （g） 路径都在系统变量内；或者通过WinR -> cmd 来检测， 如果能够显示qmake 的信息 ， g 的信息 ， 就说明设置环境变量成功。 2. 打开项目文件夹，在这里打开cmd, 换…...

编程日记 2025/8/20 16:03:53

判断字符是否唯一 --- 位运算

目录一：题目二：算法与原理三：代码分析一：题目题目链接：面试题 01.01. 判定字符是否唯一 - 力扣（LeetCode） 二：算法与原理三：代码分析 class Solution { publ…...

编程日记 2025/8/20 16:03:52

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

一、实现思路

二、代码实现

三、总结

相关文章：