js使用文件流下载csv文件的实现方法

要实现通过 JavaScript 使用文件流下载 CSV 文件可以按以下步骤进行：

第一步：构造数据

首先需要将要下载的 CSV 文件内容组织成符合格式的数据，可以使用字符串拼接或者使用第三方库生成：

const data = [
  ['姓名', '性别', '年龄'],
  ['张三', '男', '20'],
  ['李四', '女', '22'],
  ['王五', '男', '25']
];
const csvContent = "data:text/csv;charset=utf-8," + data.map(e => e.join(",")).join("\n");

上述代码中的 data 数组是包含 CSV 文件内容的二维数组， csvContent 则是将数据转换成符合要求的 URL 字符串。

第二步：创建下载链接

接下来需要创建一个 a 标签并设置它的 href 属性为刚才构造的 csvContent，并设置 download 属性为文件名：

const link = document.createElement("a");
link.setAttribute("href", encodeURI(csvContent));
link.setAttribute("download", "data.csv");
document.body.appendChild(link);

上述代码中的 download 属性指定要下载的文件名，这里设置为 data.csv。encodeURI() 函数用于对URI进行编码，确保文件名能够正常显示。

第三步：模拟点击下载链接

接下来使用 JavaScript 模拟点击下载链接，即调用 click() 方法：

link.click();

最终代码如下：

const data = [
  ['姓名', '性别', '年龄'],
  ['张三', '男', '20'],
  ['李四', '女', '22'],
  ['王五', '男', '25']
];
const csvContent = "data:text/csv;charset=utf-8," + data.map(e => e.join(",")).join("\n");

const link = document.createElement("a");
link.setAttribute("href", encodeURI(csvContent));
link.setAttribute("download", "data.csv");
document.body.appendChild(link);
link.click();

以上是一个简单的示例，其处理的数组仅包含了表头和三行数据。如果要下载更大的数据文件，可以使用类似于异步请求成功后再执行下载的方式进行。