在前端开发中，有时我们需要将给定数据导出到CSV（逗号分隔值）格式的文件中。通常情况下，我们可以通过向服务器发送请求并由服务器生成CSV文件来实现此目的。但是，在某些情况下，我们可能无法使用服务器交互的功能，例如，我们想让用户下载他们在网站上创建的数据的CSV文件。在这种情况下，我们可以使用 JavaScript 和浏览器的功能来将数据导出到 CSV 文件中。
CSV（逗号分隔值）格式简介
CSV 格式是一种常见的文件格式，用于存储表格数据。每行代表一个记录，字段则用逗号进行分隔。例如，以下是一个简单的 CSV 文件：
Name, Age, Gender John, 25, Male Jane, 30, Female
导出数据到CSV文件的步骤
要将数据导出到 CSV 文件中，我们需要完成以下步骤：
- 将数据转换为CSV格式的字符串。
- 将该字符串写入到文件中。
- 提供一个下载链接，使用户可以下载该文件。
将数据转换为CSV格式的字符串
对于给定的数据，我们需要将其转换为符合CSV文件格式的字符串。如下是一个将数组数据转换成CSV字符串的例子：
-- -------------------- ---- -------
-------- ------------------ -
----- ------ - -------------------------------
----- ---- - -------------- --
------------------
------------ -- -------------
----------
--
------ -------- --------------------
-上述函数接受一个包含对象的数组，每个对象代表表格中一行数据。该函数将表头和数据行分别处理并组合成CSV格式的字符串。
将CSV字符串写入文件
有了CSV字符串，我们可以使用Blob（二进制大对象） API 来将其写入到文件中。以下是一个将 CSV 字符串写入到文件中的示例代码：
-- -------------------- ---- -------
-------- ---------------- --------- -
----- ---- - --- ----------- - ----- ------------------------- ---
-- ------ - ---- -------- --- --- ----------- --- ------- - ----- ----- -- -------- ---------
----- ---- - ----------------------------
-- -------------- --- ---------- -
----- --- - --------------------------
------------------------- -----
----------------------------- ----------
--------------------- - ---------
--------------------------------
-------------
--------------------------------
-------------------------
-
-上述函数接受两个参数：CSV 格式的字符串和文件名。该函数使用 Blob API 创建一个代表 CSV 文件的二进制对象，并为用户提供下载链接。这个下载链接在调用click()方法之后会自动开始下载。
提供下载链接
最后，我们需要在页面中创建一个下载链接，让用户点击即可开始下载CSV文件。以下是一个在页面中创建下载链接的示例代码：
-- -------------------- ---- ------- ----- ---- - - - ----- ------- ---- --- ------- ------ -- - ----- ------- ---- --- ------- -------- -- -- ----- --- - ------------------- ----- -------- - ----------- ---------------- ----------
上述代码创建了一个包含表格数据的数组，将其转换为 CSV 格式的字符串，并将其写入到名为 "data.csv" 的文件中。然后，该函数自动为用户生成一个下载链接。
总结
在没有服务器交互的情况下，我们可以使用 JavaScript 和浏览器的功能来将数据导出到 CSV 文件中。大致步骤包括将数据转换为CSV格式的字符串、将该字符串写入到文件中并提供下载链接。这种技术可用于让用户轻松地将他们在网站上产生的数据导出
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12188