如何在React中通过锚点标签下载API返回的CSV格式数据

这种通过动态创建锚点标签结合Blob和ObjectURL实现CSV文件下载的方案，是前端处理API返回文件流的常用手段，你的代码思路完全正确。

代码关键点解析 #

• 获取API数据：const { data } = await API.exportExcel(); 要确保API返回的是原始CSV文本内容，而非被自动解析为JSON格式的数据，否则后续Blob创建会导致文件内容异常。
• 创建Blob对象：new Blob([data], { type: 'text/csv' }) 明确指定MIME类型为text/csv，能让浏览器正确识别文件类型，保证下载后的文件可直接用表格软件打开。
• 生成临时URL：window.URL.createObjectURL() 会生成一个指向Blob内容的临时URL，作为锚点标签的下载地址。
• 触发下载并清理资源：动态创建<a>标签后设置download属性指定文件名，模拟点击触发下载，最后调用window.URL.revokeObjectURL(url)释放临时URL占用的内存，避免内存泄漏。

补充注意事项 #

• 响应类型配置：如果使用axios等请求库，需要在API请求中设置responseType: 'text'（或'blob'），示例如下：

  // 以axios为例的API配置示例
  const exportExcel = () => {
    return axios.get('/api/export', {
      responseType: 'text' // 关键配置，确保返回原始文本
    });
  };
  

• 文件名规范：建议给download属性的文件名加上.csv后缀，比如"export_data.csv"，避免浏览器识别文件类型时出现偏差。
• 乱码处理：如果下载的CSV文件出现乱码，可检查API返回的编码是否为UTF-8，必要时在创建Blob时指定编码：

  new Blob([data], { type: 'text/csv;charset=UTF-8' });
  

内容的提问来源于stack exchange，提问作者Yewin