CSV（Comma-Separated Values，逗号分隔值）是一种常用的文件格式，用于存储表格数据。CSV文件中的数据以逗号为分隔符，通常以文本格式保存，易于人和计算机阅读。CSV格式的优点在于其简单性和广泛支持，几乎所有的电子表格软件（如Excel、Google Sheets）和数据库都可以读取和写入CSV。
CSV格式的结构
CSV文件的结构非常简单。一般来说，第一行是表头，包含各列的名称，后面的行则是具体的数据。例如：
姓名,年龄,性别
张三,28,男
李四,22,女
王五,35,男
在这个例子中，我们有三个字段：姓名、年龄和性别。每一行代表一个记录，字段之间用逗号分隔。
JavaScript 写入 CSV 文件
在JavaScript中，我们可以使用Blob对象和URL.createObjectURL方法将数据写入到CSV文件。下面是一个示例代码，展示如何将JSON数据转换为CSV格式，并实现下载功能：
function downloadCSV(data) {
// 将数组转换为CSV格式
const csvRows = [];
const headers = Object.keys(data[0]);
csvRows.push(headers.join(',')); // 添加表头
for (const row of data) {
const values = headers.map(header => {
const escaped = ('' + row[header]).replace(/"/g, '\\"'); // 转义引号
return `"${escaped}"`; // 加上双引号
});
csvRows.push(values.join(',')); // 添加数据行
}
// 创建CSV文件Blob
const csvString = csvRows.join('\n');
const blob = new Blob([csvString], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
// 创建下载链接
const a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', 'data.csv');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// 示例数据
const sampleData = [
{ 姓名: '张三', 年龄: 28, 性别: '男' },
{ 姓名: '李四', 年龄: 22, 性别: '女' },
{ 姓名: '王五', 年龄: 35, 性别: '男' }
];
// 下载CSV文件
downloadCSV(sampleData);
JavaScript 读取 CSV 文件
要读取CSV文件，通常我们会使用File API配合Papaparse或其他库进行解析。下面是一个使用Papaparse库读取CSV文件的示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>读取CSV示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
Papa.parse(file, {
complete: function(results) {
console.log('解析后的数据：', results.data);
},
header: true // 设置为true以便将第一行作为表头
});
}
});
</script>
</body>
</html>
在这个示例中，我们使用了Papaparse库，以便更轻松地解析CSV文件。用户选择的文件通过input元素被读取，然后使用Papa.parse方法来解析CSV文件，结果输出到控制台。
总结
CSV格式因其简单明了而广泛应用于数据存储与交换。通过JavaScript，我们能够轻松地生成和读取CSV文件，帮助我们进行数据的导入导出。在实际应用中，结合HTML的文件上传功能，可以实现简便的数据处理流程。
