JavaScript 读写 CSV 文件教程：从入门到实践

2026-03-14 00:10:04 4648阅读

在现代 Web 开发中，处理 CSV（Comma-Separated Values）文件是一项常见的需求。CSV 文件以纯文本形式存储表格数据，每行代表一条记录，各字段之间用逗号分隔。JavaScript 作为前端开发的核心语言，提供了多种读写 CSV 文件的方法。本文将详细介绍这些方法，帮助你轻松掌握在 JavaScript 中读写 CSV 文件的技巧。

读取 CSV 文件

1. 使用 `fetch` API 读取本地或远程 CSV 文件

fetch API 是现代 JavaScript 中用于发起网络请求的标准方法，也可以用来读取本地或远程的 CSV 文件。以下是一个示例代码：

// 定义一个异步函数来读取 CSV 文件
async function readCSVFile() {
  try {
    // 使用 fetch 获取 CSV 文件
    const response = await fetch('data.csv');
    // 将响应内容转换为文本
    const csvText = await response.text();
    // 调用 parseCSV 函数解析 CSV 文本
    const data = parseCSV(csvText);
    console.log(data);
  } catch (error) {
    console.error('读取文件时出错:', error);
  }
}

// 定义解析 CSV 文本的函数
function parseCSV(csvText) {
  // 将 CSV 文本按行分割
  const lines = csvText.split('\n');
  // 获取第一行作为表头
  const headers = lines[0].split(',');
  const result = [];
  // 遍历除表头外的每一行
  for (let i = 1; i < lines.length; i++) {
    const currentLine = lines[i].split(',');
    if (currentLine.length === headers.length) {
      const obj = {};
      // 将每列数据与表头对应
      for (let j = 0; j < headers.length; j++) {
        obj[headers[j]] = currentLine[j];
      }
      result.push(obj);
    }
  }
  return result;
}

// 调用读取函数
readCSVFile();

2. 使用 `FileReader` 读取用户上传的 CSV 文件

如果你需要让用户上传 CSV 文件并读取其内容，可以使用 FileReader 对象。以下是一个示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>读取用户上传的 CSV 文件</title>
</head>

<body>
  <!-- 创建文件输入框 -->
  <input type="file" id="csvFileInput">
  <script>
    // 获取文件输入框元素
    const csvFileInput = document.getElementById('csvFileInput');
    // 为文件输入框添加 change 事件监听器
    csvFileInput.addEventListener('change', function () {
      const file = this.files[0];
      if (file) {
        const reader = new FileReader();
        // 为 FileReader 的 load 事件添加监听器
        reader.addEventListener('load', function (e) {
          const csvText = e.target.result;
          const data = parseCSV(csvText);
          console.log(data);
        });
        // 读取文件内容为文本
        reader.readAsText(file);
      }
    });

    // 复用之前定义的 parseCSV 函数
    function parseCSV(csvText) {
      const lines = csvText.split('\n');
      const headers = lines[0].split(',');
      const result = [];
      for (let i = 1; i < lines.length; i++) {
        const currentLine = lines[i].split(',');
        if (currentLine.length === headers.length) {
          const obj = {};
          for (let j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentLine[j];
          }
          result.push(obj);
        }
      }
      return result;
    }
  </script>
</body>

</html>

写入 CSV 文件

1. 将 JavaScript 数据转换为 CSV 文本

要将 JavaScript 数据写入 CSV 文件，首先需要将数据转换为 CSV 格式的文本。以下是一个示例函数：

// 定义将数据转换为 CSV 文本的函数
function convertToCSV(data) {
  const headers = Object.keys(data[0]);
  let csv = headers.join(',') + '\n';
  // 遍历数据数组
  data.forEach(item => {
    const values = headers.map(header => item[header]);
    csv += values.join(',') + '\n';
  });
  return csv;
}

// 示例数据
const sampleData = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'Los Angeles' }
];

// 调用转换函数
const csvText = convertToCSV(sampleData);
console.log(csvText);

2. 将 CSV 文本保存为文件

在浏览器环境中，可以使用 Blob 对象和 URL.createObjectURL 方法将 CSV 文本保存为文件。以下是一个示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>保存 CSV 文件</title>
</head>

<body>
  <button id="saveCSVButton">保存 CSV 文件</button>
  <script>
    // 获取保存按钮元素
    const saveCSVButton = document.getElementById('saveCSVButton');
    // 为保存按钮添加点击事件监听器
    saveCSVButton.addEventListener('click', function () {
      const sampleData = [
        { name: 'John', age: 30, city: 'New York' },
        { name: 'Jane', age: 25, city: 'Los Angeles' }
      ];
      const csvText = convertToCSV(sampleData);
      // 创建 Blob 对象
      const blob = new Blob([csvText], { type: 'text/csv' });
      // 创建临时 URL
      const url = URL.createObjectURL(blob);
      // 创建下载链接元素
      const a = document.createElement('a');
      a.href = url;
      a.download = 'data.csv';
      // 模拟点击下载链接
      a.click();
      // 释放临时 URL
      URL.revokeObjectURL(url);
    });

    // 复用之前定义的 convertToCSV 函数
    function convertToCSV(data) {
      const headers = Object.keys(data[0]);
      let csv = headers.join(',') + '\n';
      data.forEach(item => {
        const values = headers.map(header => item[header]);
        csv += values.join(',') + '\n';
      });
      return csv;
    }
  </script>
</body>

</html>

总结与建议

通过本文的介绍，你已经了解了在 JavaScript 中读写 CSV 文件的基本方法。读取 CSV 文件可以使用 fetch API 或 FileReader 对象，而写入 CSV 文件则需要先将数据转换为 CSV 文本，再使用 Blob 对象和 URL.createObjectURL 方法保存为文件。

在实际应用中，需要注意以下几点：