如何在 JavaScript 中创建和下载 CSV 文件？

CSV (Comma Separated Values) 是一种常见的电子表格文件格式，很多人在日常工作中都会使用。在 JavaScript 中创建和下载 CSV 文件也是一个非常实用的功能，下面我们就来介绍如何实现。

创建 CSV 文件

要创建 CSV 文件，我们需要先定义 CSV 文件的内容，然后将内容写入到一个字符串中。以一个简单的例子来说，假设我们要创建一个包含两行三列数据的 CSV 文件：

1,2,3
4,5,6

其中每行数据由逗号分隔，行与行之间使用换行符分隔。我们可以通过 JavaScript 的字符串操作来创建这个 CSV 文件：

const csvContent = "1,2,3\n4,5,6";

上面的代码中，我们首先定义了一个名为 csvContent 的变量，它的值是一个字符串，包含了两行三列数据。其中 \n 表示换行符。

如果数据比较复杂，我们更倾向于使用 JavaScript 中的数组来代替硬编码的字符串。假设我们要创建一个含有以下数据的 CSV 文件：

| 学号 | 姓名 | 年龄 | | ---- | ---- | ---- | | 1001 | 张三 | 18 | | 1002 | 李四 | 20 |

我们可以先将数据放在一个数组中，并使用 join() 方法来将数组转换为 CSV 格式的字符串：

const data = [
  [1001, '张三', 18],
  [1002, '李四', 20],
];

const columns = ['学号', '姓名', '年龄'];

const csvContent = [
  columns.join(','),
  ...data.map(row => row.join(',')),
].join('\n');

上面的代码首先定义了一个名为 data 的数组，它包含了两个子数组，每个子数组表示一行数据。接着我们定义了一个名为 columns 的数组，它包含了数据的列名。然后我们使用 join() 方法将 columns 和 data 中的数据转成 CSV 格式的字符串，并将它们拼接在一起。

下载 CSV 文件

有了 CSV 文件内容，我们就需要将它下载到本地了。为此，我们可以使用 HTML5 的 Blob 和 URL 对象来帮助我们实现。具体步骤如下：

1. 将 CSV 文件内容转成 Blob 对象；
2. 使用 URL.createObjectURL 方法将 Blob 对象转成一个 URL；
3. 创建一个 a 标签，将 URL 赋值给它的 href 属性；
4. 使用 setAttribute() 方法设置 download 属性为要下载的文件名；
5. 将 a 标签添加到页面，并模拟点击它。

下面是这一过程的 JavaScript 代码实现：

function downloadCsv(csvContent, fileName) {
  const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('download', fileName);
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
}

上面的代码定义了一个名为 downloadCsv 的函数，它接受两个参数：csvContent 和 fileName。csvContent 表示要下载的 CSV 文件内容，fileName 表示要保存的文件名。函数首先使用 Blob 对象将 CSV 文件内容转成二进制数据。

然后创建一个链接，并将链接指向该二进制数据的 URL 地址（即 Blob URL）。我们通过 setAttribute() 方法给链接元素设定 download 属性，并将值设置为文件名。最后将链接元素添加到页面中，并模拟一个链接点击事件触发下载。

函数执行完毕后，我们还需要调用 URL.revokeObjectURL 方法来释放 URL 对象的内存。

完整代码

下面是一个完整的创建和下载 CSV 文件的 JavaScript 代码实现：

function downloadCsv(csvContent, fileName) {
  const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('download', fileName);
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
}

const data = [
  [1001, '张三', 18],
  [1002, '李四', 20],
];

const columns = ['学号', '姓名', '年龄'];

const csvContent = [
  columns.join(','),
  ...data.map(row => row.join(',')),
].join('\n');

downloadCsv(csvContent, 'data.csv');

上面的代码定义了一个 downloadCsv 函数和一个名为 data 的数组，分别表示了创建和下载 CSV 文件的核心逻辑和要导出的表格数据。我们最后执行了一次 downloadCsv 函数，将表格数据下载成 CSV 文件，并将文件保存为 data.csv。