百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

不用任何 js 库,纯前端导出数据到 Excel / CSV 文件就简单几行代码

itomcoil 2025-03-20 15:42 8 浏览

最近实现的导出数据为表格的需求,不需要工具库,也不要后端实现,mark 一下。

js 导出 excel 表格

最近工作中又遇到了将表格数据导出为 excel 表格的需求,我第一时间想到的是之前我的网站上推荐过的 javascript 库 node-xlsx,这是一个在 node.js 服务端使用的库,之前用于电商系统导出订单数据给运营同事,使用比较简单,但仍需要后端实现。

需求简单分析

这次的需求有下面几个特点:

  • 数据类型几乎都是文本,没有太多数字型的列
  • 没有太多需要统计或者汇总等计算结果的输出的行
  • 需要导出的数据已经在前端全部加载并展示

解决方案确定

带着不想麻烦后端的想法,我尝试寻找纯前端实现数据导出 excel 表格的方法。找了一圈,发现效果不理想,要么太复杂,要么导出的 xlsx 文件兼容性有问题。突然一激灵,想到之前用过的数据统计应用导出的文件格式是 csv 的,稍微研究了一下,最后我把决定把导出的文件格式转为了 csv 表格。

csv 是什么格式的文件?

csv 是一种主要以逗号为分隔符的分隔值文件格式,以纯文本的形式储存表格数据,常常用来作为不同应用程序间转移数据使用。

csv 文件的特点:

  • 用逗号作为表格列分隔符,当然也可以用其他分隔符,不过为了通用性,推荐用逗号
  • 纯文本格式,读取、写入都很简单
  • 每一行文本就是表格的一行数据
  • 几乎能被所有的表格应用支持,excel 和 wps 更是老早就支持导入 csv 文件

看到这里,相信很多开发者已经知道,只要把数据处理成符合上面格式的字符串,然后把 csv 的文件头加上,通过 标签下载,就完成了导出文件下载到本地的需求。

代码实现

假设有如下表格数据:

const tableRows = [
  ['姓名','手机号','部门'], // 第一行就是表格表头
  ['尤与西','131xxxx','技术部'],
  ['阮易枫','158xxxx','技术部'],
  ['廖学丰','189xxxx','技术部']
]

构造 CSV 字符:

// 构造数据字符,换行需要用\r\n
let CsvString = tableRows.map(data => data.join(',')).join('\r\n');
// 加上 CSV 文件头标识
CsvString = 'data:application/vnd.ms-excel;charset=utf-8,\uFEFF' + encodeURIComponent(CsvString);
// 通过创建a标签下载
const link = document.createElement('a');
link.href = CsvString;
// 对下载的文件命名
link.download = `技术部顶级员工列表.csv`;
// 模拟点击下载
link.click();
// 移除a标签
link.remove();

这样就会直接从浏览器下载,完美完成需求。

注意事项

csv 文件默认是每一行为一条数据,如果导出表格的单元格里需要换行,则需要用双引号包裹起来,比如构造出的 CSV 字符串:

尤与西,136xxxx,技术部,"第二小组
技术主管",001
阮易枫',158xxxx,技术部,"第三小组
技术主管",002

上面数据导出表格共2条数据,每行第4列的“小组”和“技术主管”之间的换行会保留。

另外,这种方式不支持合并单元格、设置数据类型的格式,如果输出的表格对格式要求较高,还是老老实实用 node-xlsx 吧。

最后祝大家早点完成需求,早点下班。

相关推荐

外婆都能学会的Python教程(二十六):Python中的函数式编程

前言Python是一个非常容易上手的编程语言,它的语法简单,而且功能强大,非常适合初学者学习,它的语法规则非常简单,只要按照规则写出代码,Python解释器就可以执行。下面是Python的入门教程介绍...

[编程基础] Python lambda函数总结

Pythonlambda函数教程展示了如何在Python中创建匿名函数。Python中的匿名函数是使用lambda关键字创建的。文章目录1介绍1.1简单使用1.2Pythonlambda与m...

一文掌握Python中列表推导和 Lambda 函数

嵌套列表推导与嵌套列表推导式一起工作:matrix=[[jforjinrange(5)]foriinrange(3)]print(matrix)#Createsa3x5...

python中函数详解和实践

少看美女多学习来吧客观:1.函数定义使用def关键字定义函数:deffunction_name(parameters):"""函数文档字符串""&...

Python基础编程20例之七:filter过滤,筛选奇数

20230115星期日:list_value=[1,2,3,4,5,6,7,8,9]defis_qishu(n):ifn%2==1:returnTrue...

Python 匿名函数Lambda的9种用法

简单的lambda函数x=1f=lambdax:x+1print(f(1))这个简单的lambda函数接受一个参数x,并返回x+1的结果。将lambda函数赋值给变量ad...

python匿名函数lambda的语法特点和应用场景

在Python的编程过程中,有时我们会碰到一些很简单的计算,但是感觉专门为这个计算创建个函数又觉得太小题大做,这时就可以用到lambda表达式。lambda是用于创建匿名函数,也就是没有具体名称的函...

python组合函数不允许你还不会的 10 个高效技巧

以下是Python中组合函数的10个高效技巧,涵盖函数串联、柯里化、装饰器链式调用等场景,助你构建灵活的数据处理流水线:一、基础组合技巧1.函数管道(Pipeline)defadd(x):...

刘心向学(21)Python中的迭代器与内置函数

分享兴趣,传播快乐,增长见闻,留下美好!亲爱的您,这里是LearningYard新学苑。今天小编为大家带来文章“刘心向学(21)Python中的迭代器与内置函数”欢迎您的访问。Share...

Python之函数式编程:funcy,功能更加齐全的函数式编程库

引言通过前面的关于Python中进行函数式编程的系列文章的介绍,我们已经把函数式编程范式中的相关特性,以及Python内置的类、functools模块对函数式编程范式的支持,都介绍了一遍。今天这篇文章...

Python高级编程技巧:深入理解函数式编程

引言Python是一种多范式编程语言,支持面向对象、命令式、以及函数式编程等多种编程范式。函数式编程以其简洁、高效和易于并行处理的特点,在处理大规模数据和复杂逻辑时显示出独特的优势。本文将深入探讨Py...

Python中级篇~函数式编程的概念和原则(匿名函数和高阶函数)

Python的函数式编程是一种编程范式,它是基于数学中的函数概念而产生的。在函数式编程中,函数被看作是一等公民,可以像变量一样被传递和操作。函数式编程具有很多优点,包括代码的可读性、可维护性和可扩展性...

Python函数中几个特殊又很有用的函数,一定要搞明白函数式编程

带你走进@机器人时代Discover点击上面蓝色文字,关注我们Python函数提供了一种表单简单的函数的方式,成为lambda表达式,我们来看看下面的例子:#常规函数写法defy(m,n)...

Python匿名函数详解:从概念到实践

一、什么是匿名函数?在Python中,匿名函数(AnonymousFunction)是一种不需要显式命名的函数,通常用lambda关键字定义。与使用def定义的普通函数相比,匿名函数更简洁,适合定义...

Python 函数进阶的10大技巧,不允许你还不会

函数是Python编程的核心构建块,掌握高级函数技巧可以显著提升代码质量和开发效率。以下是Python函数编程的进阶技巧:1.函数参数高级用法1.1灵活的参数处理#位置参数、默认参数、可变参数...