为什么当我将onClick事件添加到我的按钮时，CSVLINK（react-csv）不再工作了？-Java 学习之路

我有Node.Js后端并对前端做出反应 . 我在后端有一个查询，根据我在输入框中输入的类别名称返回数据 . 在我在按钮中添加onClick事件之前，它以CSV格式返回结果并为我下载 . 将onClick添加到按钮后，我可以看到在后端我有一个成功的查询，但在前端，它没有在csv文件中下载我的结果 . 我正在使用来自Semantic UI React的按钮和来自'react-csv'包的CSVLINK .

这是我的代码（我在onClick中调用的函数）：

handleReportButton(e){

e.preventDefault();
const value = e.target.value;

fetch(`/reportOnAnswersCategory`,{
method: 'POST',
body: JSON.stringify({
  answer: value
}),
headers: {"Content-Type": "application/json"}
  })
.then(data => data.json())
.then((data) => {this.setState({report : data});})
.catch(err => console.error(err));
}

这是按钮（之前我已经绑定了函数，并且在返回之前我做了'const = this.state;'）：

<Button onClick={this.handleReportButton}>
  <CSVLink data={report} >Download this report</CSVLink>
</Button>

在此先感谢您的帮助

1 回答

0
要在html5中下载文件，您可以做的是设置带有下载属性的锚标记，
```
<a href="/reportOnAnswersCategory" download="data.csv" id="btnExport" >Export data into Excel</a>
```
当用户单击该链接时，下载属性将显示在保存中 . 在这种情况下，该文件将作为“data.csv”下载

但要将'answer:value'传递给api，您可以更改节点以接受它作为查询参数并将URL更改为 href="/reportOnAnswersCategory?answer="+{value} ，或者您可以使用css样式隐藏 <a> ， display:none 并点击按钮，执行 document.getElementById("btnExport").click()

编辑：当下载使用 POST 请求时，
```
fetch(service_url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },

  }).then(response => response.blob())
    .then(response => {
  var blob=response
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {
  var base64data = reader.result;

      window.open(base64data);

  }
})
.catch(error => {
  console.error(error);
});
```
回复于 2024-05-03T05:05:20+08:00

为什么当我将onClick事件添加到我的按钮时，CSVLINK（react-csv）不再工作了？

1 回答

相关问题