JavaScript 创建和下载 CSV 文件

17 Mar 2025 | 6 分钟阅读

CSV 文件在计算机科学中是必不可少的一部分，尤其是在处理网站和数据库时。在某些情况下，您可能希望让用户下载浏览器中的某些数据。在这种情况下，CSV 文件可以帮助程序员以表格形式下载网站数据。程序员使用 CSV 文件格式让用户下载网站数据。

CSV 是一种简单易用的表格形式存储网站数据的方法。借助 JavaScript，您可以从 HTML 页面收集数据并创建 CSV 文件，或者也可以手动创建数据。您可以在 MS-Excel 中打开 CSV 文件并查看其中的数据。几乎所有数据库都需要 CSV 文件来备份数据。

为了导出网站数据，程序员使用 CSV 文件。可以使用 JavaScript 创建和下载 CSV 文件。本章将介绍如何将网站 HTML 表格数据下载到 CSV 文件中。

如何下载 CSV 文件？

借助 JavaScript，您可以从 HTML 页面收集数据到 CSV 文件并轻松下载。使用 JavaScript 编程和 HTML 来创建数据并以 CSV 格式下载。

本章将向您展示如何从客户端和服务器下载 CSV 文件。

为什么需要 CSV 文件？

CSV 文件以易于理解的表格形式存储和显示数据。
它易于使用和实现。因此，程序员倾向于使用 CSV 以 .csv 格式下载网站数据。
创建和下载它不需要任何第三方库。
通过使用简单的 JavaScript 方法和参数，您可以轻松地在您的网站中使用 CSV 文件。

下面的示例是本章中创建和下载 CSV 文件的最简单示例之一。

实施

要为您的 CSV 文件创建数据，您只需要创建一个多维数组，其中包含 HTML 页面的数据。为了学习目的，您可以手动创建数据，而不是直接从 HTML 页面获取数据。

为此，您需要使用 JavaScript 创建一个多维数组，并手动提供不同的值（例如 - Justin Bieber, 24, Singer, London 分别作为姓名、年龄、职业和城市）来创建 CSV 文件。

查看创建和下载 CSV 文件的代码实现。

创建和下载 CSV 文件

示例 1

在此示例中，我们将创建一个多维数组并添加一些数据来创建 CSV 文件。除此之外，我们还将添加一个按钮供用户下载这些数据。当用户单击给定的按钮时，数据将开始以 .csv 文件格式下载。

复制代码

<html>
<head>
<title> Download CSV file </title>
</head>

<script>
//create CSV file data in an array
var csvFileData = [
   ['Alan Walker', 'Singer'],
   ['Cristiano Ronaldo', 'Footballer'],
   ['Saina Nehwal', 'Badminton Player'],
   ['Arijit Singh', 'Singer'],
   ['Terence Lewis', 'Dancer']
];
  
//create a user-defined function to download CSV file 
function download_csv_file() {

    //define the heading for each row of the data
    var csv = 'Name,Profession\n';
    
    //merge the data with CSV
    csvFileData.forEach(function(row) {
            csv += row.join(',');
            csv += "\n";
    });
 
    //display the created CSV data on the web browser 
    document.write(csv);

   
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    
    //provide the name for the CSV file to be downloaded
    hiddenElement.download = 'Famous Personalities.csv';
    hiddenElement.click();
}
</script>

<body>
<h3> Click the button to download the CSV file </h3>

<!-- create an HTML button to download the CSV file on click -->
<button onclick="download_csv_file()"> Download CSV </button>

</body>
</html>

输出

尝试在 Web 上执行上述代码，并获得如下屏幕截图所示的输出

单击此 下载 CSV 按钮以下载此文件中创建的 CSV 数据，并且该 CSV 数据也将显示在 Web 上。

打开下载的 CSV 文件

查看下载文件的扩展名，它将是 .csv。作为参考，请在 MS-Excel 中打开下载的 CSV 文件并查看其中的数据。我们将在打开 CSV 文件后显示 Excel 和记事本中的输出。您可以看到 CSV 文件数据将以表格形式显示。

请参阅 MS-Excel 中 CSV 数据的以下屏幕截图。除此之外，您还可以看到我们已在 Web 浏览器上显示了 CSV 数据。

MS-Excel 中的 CSV 文件

记事本中的 CSV 文件

导出并下载网页的 HTML 表格数据到 CSV 文件

还有一种方法可以将网站数据下载为 CSV 文件格式。有时，您希望允许用户将网站数据下载为 CSV 文件格式。JavaScript 使程序员能够使用其内置方法将网站数据（网站的 HTML 表格数据）导出到 CSV 文件，该文件可以在 MS-Excel 中打开。

示例

在下面的示例中，我们将把 HTML 表格数据从网页导出到 CSV 文件，并下载此 CSV 文件。我们将添加一个按钮，以便用户单击一次即可下载此 CSV 数据文件。当用户单击此按钮时，数据将开始以 .csv 文件格式下载。

复制代码

<html>
<head>
<title> Export HTML table Data to CSV using JavaScript </title>

<style>
*{
     color:#2b2b2b;
     font-family: "Roboto Condensed";
}
table { 
     width:40%;
}
th {
     text-align:left;
     color:#4679bd;
}
</style>
</head>

<script>
//user-defined function to download CSV file
function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;
   
    //define the file type to text/csv
    csvFile = new Blob([csv], {type: 'text/csv'});
    downloadLink = document.createElement("a");
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";

    document.body.appendChild(downloadLink);
    downloadLink.click();
}

//user-defined function to export the data to CSV file format
function exportTableToCSV(filename) {
   //declare a JavaScript variable of array type
   var csv = [];
   var rows = document.querySelectorAll("table tr");
 
   //merge the whole data in tabular form 
   for(var i=0; i<rows.length; i++) {
	var row = [], cols = rows[i].querySelectorAll("td, th");
	for( var j=0; j<cols.length; j++)
	   row.push(cols[j].innerText);
	csv.push(row.join(","));
   } 
   //call the function to download the CSV file
   downloadCSV(csv.join("\n"), filename);
}
</script>

<body>
<!-- create table and provide data inside it -->
<table>
<tr>
	<th> Name </th>
	<th> Profession </th>
	<th> Age </th>
	<th> Hobby </th>
</tr>
<tr>
	<td> Cristiano </td>
	<td> Hacker </td>
	<td> 24 </td>
	<td> Travelling, Sky-diving </td>
</tr>
<tr>
	<td> Jenifer </td>
	<td> Photographer </td>
	<td> 22 </td>
	<td> Cooking </td>
</tr>
<tr>
	<td> Simon </td>
	<td> Travelling-guide </td>
	<td> 35 </td>
	<td> Dancing, Gardening </td>
</tr>
<tr>
	<td> Cristiano Ronaldo </td>
	<td> Footballer </td>
	<td> 29 </td>
	<td> Singing </td>
</tr>
</table>
<p><b> Click the Download CSV button to download the created data </b></p>

<!-- button to call the user-defined function to download CSV file data -->
<button onclick="exportTableToCSV('person.csv')"> Export HTML table to CSV File </button> 
</body>
</html>

输出

将上面的代码复制并保存在一个文件中，然后在 Web 上执行。您将在 Web 浏览器上获得如下屏幕截图所示的输出，其中包含一个包含数据行的 HTML 表格。

单击给定的 将 HTML 表格导出到 CSV 文件 按钮以下载数据到 CSV 文件格式。文件将以下载名称 person.csv 下载。

您可以在 MS-Excel 中打开此文件以查看其中包含的数据。打开下载的文件，查看其中的内容与 Web HTML 表格内容相同。

下一个主题如何在 JavaScript 中发出蜂鸣声

JavaScript 创建和下载 CSV 文件

如何下载 CSV 文件？

为什么需要 CSV 文件？

实施

创建和下载 CSV 文件

示例 1

打开下载的 CSV 文件

导出并下载网页的 HTML 表格数据到 CSV 文件

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 创建和下载 CSV 文件

如何下载 CSV 文件？

为什么需要 CSV 文件？

实施

创建和下载 CSV 文件

示例 1

打开下载的 CSV 文件

导出并下载网页的 HTML 表格数据到 CSV 文件

示例

相关帖子

如何使用 JavaScript 创建图像映射

如何在 JavaScript 中发出蜂鸣声

Javascript 键盘事件

JavaScript Window close 方法

JavaScript 数值分隔符

JavaScript 区分大小写吗？

JavaScript 中的随机图像生成器

如何在我的浏览器中启用 JavaScript

JavaScript String startsWith