JavaScript 下载 CSV

在前后端分离的开发中，前端开发者有时需要从后端获取数据并将其保存为 CSV 文件供用户下载。本文将介绍如何使用 JavaScript 下载 CSV 文件。

1. 将数据转换为 CSV 格式

首先，我们需要将数据转换为 CSV 格式，这需要将数据转换为一系列逗号分隔的文本行。以下是一个示例数据（假设我们有一个包含员工信息的数组）：

var employees = [
  { name: "John Doe", age: 34, email: "john.doe@example.com" },
  { name: "Jane Smith", age: 26, email: "jane.smith@example.com" },
  { name: "Bob Johnson", age: 43, email: "bob.johnson@example.com" }
];

我们可以使用以下代码将数据转换为 CSV 格式：

function convertToCSV(arr) {
  var csv = arr.map(function(row) {
    return Object.values(row).join(",");
  });
  csv.unshift(Object.keys(arr[0]).join(","));
  return csv.join("\n");
}

var csvData = convertToCSV(employees);

在上面的代码中，我们使用 Object.values() 方法获取每个对象的属性值，将其转换为逗号分隔的文本行，并将其存储在数组 csv 中。然后，我们使用 Object.keys() 方法获取对象的属性名称，将其转换为文本行，并将其添加到数组 csv 的开头。最后，我们将数组 csv 的所有元素连接为一个字符串，并用换行符分隔每个文本行。

2. 创建并下载 CSV 文件

现在我们已经将数据转换为 CSV 格式，接下来我们需要创建并下载 CSV 文件。我们可以使用 HTML5 的 Blob 和 URL API 来实现这一点。

以下是代码：

function downloadCSV(csv, filename) {
  var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
  if (navigator.msSaveBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    var link = document.createElement("a");
    if (link.download !== undefined) {
      var url = URL.createObjectURL(blob);
      link.setAttribute("href", url);
      link.setAttribute("download", filename);
      link.style.visibility = "hidden";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

downloadCSV(csvData, "employees.csv");

在上面的代码中，我们首先创建一个 Blob 对象，它表示一个不可变的、原始数据的类文件对象。我们将 CSV 数据作为 Blob 的参数，并设置 MIME 类型为“text/csv;charset=utf-8”。

然后，我们使用 link 元素以编程方式创建一个超链接，将其屏蔽并向文档添加。使用 URL.createObjectURL() 方法创建 URL，指向 blob，并使用 setAttribute() 方法将其设置为链接的 href 属性。我们还将文件名设置为链接的 download 属性，并使用 click() 方法模拟用户点击该链接进行下载。最后，我们从文档中删除链接元素。

3. 完整代码示例

以下是将数据转换为 CSV 格式、创建并下载 CSV 文件的完整代码示例：

var employees = [
  { name: "John Doe", age: 34, email: "john.doe@example.com" },
  { name: "Jane Smith", age: 26, email: "jane.smith@example.com" },
  { name: "Bob Johnson", age: 43, email: "bob.johnson@example.com" }
];

function convertToCSV(arr) {
  var csv = arr.map(function(row) {
    return Object.values(row).join(",");
  });
  csv.unshift(Object.keys(arr[0]).join(","));
  return csv.join("\n");
}

function downloadCSV(csv, filename) {
  var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
  if (navigator.msSaveBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    var link = document.createElement("a");
    if (link.download !== undefined) {
      var url = URL.createObjectURL(blob);
      link.setAttribute("href", url);
      link.setAttribute("download", filename);
      link.style.visibility = "hidden";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

var csvData = convertToCSV(employees);
downloadCSV(csvData, "employees.csv");

我们在此示例中首先将包含员工信息的数组转换为 CSV 格式，并将其存储在变量 csvData 中。然后，我们在调用 downloadCSV() 函数时将其传递给函数，并指定文件名为“employees.csv”。调用该函数将创建并下载 CSV 文件。

结论

使用 JavaScript 下载 CSV 文件可以轻松地将数据转换为 CSV 格式并下载到用户的设备上。请注意，本文中的代码示例可能需要根据具体需求进行修改。