CSVLink 在 `react-csv` npm 包中生成 HTML 而不是 CSV答案

【问题标题】：CSVLink generating HTML instead of CSV in `react-csv` npm packageCSVLink 在 `react-csv` npm 包中生成 HTML 而不是 CSV
【发布时间】：2022-10-01 17:35:20
【问题描述】：

我正在尝试从以下数据下载 CSV 文件：

import { CSVLink } from \"react-csv\";

headers = [
  { label: \"First Name\", key: \"firstname\" },
  { label: \"Last Name\", key: \"lastname\" },
  { label: \"Email\", key: \"email\" }
];

data = [
  { firstname: \"Ahmed\", lastname: \"Tomi\", email: \"ah@smthing.co.com\" },
  { firstname: \"Raed\", lastname: \"Labes\", email: \"rl@smthing.co.com\" },
  { firstname: \"Yezzi\", lastname: \"Min l3b\", email: \"ymin@cocococo.com\" }
];

<CSVLink data={data} headers={headers}>
  Download me
</CSVLink>;

当我单击Download me 链接时，我得到一个带有.csv 扩展名的文件，但它包含该页面的HTML。如果我使用CSVDownload，则会下载正确的 CSV 文件。

我正在使用 Next.js。我应该在CSVLink 中添加什么额外的东西才能获得正确的 CSV 数据？

我无法重现该问题。你确定你没有收到任何错误吗？您能否提供有关该问题的代码框（或类似内容）？
面临同样的问题。还是不知道为什么
我正在使用 Windows 11 @juliomalves

标签： reactjs csv next.js

【解决方案1】：

只是降级到 react-csv 2.0.3 版本。它为我解决了问题。我认为这是在 2.2.* 版本发布之后发生的。

【讨论】：

【解决方案2】：

使用 react-csv@2.2.2

我能够在 Next.js 上复制该问题。我设法通过添加分隔符解决了这个问题：

<CSVLink data={data} headers={headers} separator={","}>
    Export
</CSVLink>

【讨论】：

【解决方案3】：

我在 Next.js 中遇到了同样的问题。我看了很多视频和文章，发现问题出在 2.2.2 版本上。在其中一个视频中，这个人使用了 2.0.3 版本，所以我决定试一试，它运行良好。

【讨论】：