一文详解js如何用文件流下载csv文件

1. 什么是CSV文件

CSV是Comma Separated Values（逗号分隔值）的简称。它是一种纯文本格式，用于存储表格数据，常用于网站数据的导出和导入。CSV文件中，每一行代表一个数据记录，每个字段之间用逗号隔开，并且每行末尾通常不包含任何分隔符。

CSV文件的好处在于它使用纯文本格式保存数据，可以被任何文本编辑器打开和编辑。此外，CSV文件的大小相对比较小，可以方便地进行传输和存储。

2. 文件流下载CSV文件的原理

文件流下载CSV文件的原理是将CSV文件的内容写入一个Blob对象中，然后通过URL.createObjectURL方法生成一个可供下载的文件链接。通过给用户提供这个链接，用户就可以直接下载CSV文件，而不用在服务端进行处理。

这种方法的好处在于可以消除对服务端的依赖，降低服务端的工作压力，同时也可以加快客户端的下载速度。

3. JavaScript如何使用文件流下载CSV文件

3.1 创建CSV文件内容

要想使用文件流下载CSV文件，首先需要创建CSV文件的内容。CSV文件的内容是纯文本格式的，因此我们只需要按照CSV文件格式将数据输出即可。

const data = [
  ['name', 'age', 'gender'],
  ['Tom', 18, 'Male'],
  ['Lucy', 20, 'Female'],
  ['Jim', 22, 'Male']
];
let content = '';
data.forEach((row) => {
  content += row.join(',') + '\n';
});

在上面的代码中，我们使用一个二维数组来存储CSV文件的内容。在遍历数组时，通过join方法以逗号作为分隔符将数组中的每一行连接成一个字符串，并在字符串末尾添加一个换行符，以保证每行结尾没有任何分隔符。

3.2 创建Blob对象

接下来，我们需要将CSV文件的内容写入一个Blob对象中。在JavaScript中，Blob对象表示一个IMMUTABLE、原始数据值序列。Blob对象可以用于存储二进制数据、文本数据以及任何能够通过MIME类型进行表示的数据。

const blob = new Blob([content], { type: 'text/csv;charset=utf-8' });

在上面的代码中，我们传入一个数组作为Blob对象的参数，数组的第一个元素是CSV文件的内容，第二个元素是一个JavaScript对象，用来设置MIME类型。

3.3 创建可供下载的链接

创建Blob对象之后，我们需要通过URL.createObjectURL方法将它转换成一个可供下载的链接。

const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'data.csv';
link.click();

在上面的代码中，我们首先创建了一个a标签，然后将Blob对象的URL作为链接的href属性，并将CSV文件的名称设置为download属性，最后通过click方法触发下载操作。

4. 完整的代码示例

const data = [
  ['name', 'age', 'gender'],
  ['Tom', 18, 'Male'],
  ['Lucy', 20, 'Female'],
  ['Jim', 22, 'Male']
];
let content = '';
data.forEach((row) => {
  content += row.join(',') + '\n';
});
const blob = new Blob([content], { type: 'text/csv;charset=utf-8' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'data.csv';
link.click();

上面的代码可以在浏览器控制台中运行，直接下载CSV文件。