Почему, когда я добавляю событие onClick к своей кнопке, CSVLINK(реагировать-csv) больше не работает?

Question

У меня есть Node.Js и я реагирую на интерфейс. У меня есть запрос в бэкэнде, который возвращает данные, основанные на названии категории, которые я ввожу в поле ввода. Прежде чем я добавлю событие onClick в кнопку, он вернул результаты в CSV и скачал их для меня. После добавления onClick к кнопке я вижу, что на бэкэнде у меня есть успешный запрос, но на фронте он не загружает мои результаты в файл csv. Я использую кнопку из Semantic UI React и CSVLINK из пакета "act-csv ".

Вот мой код (функция, которую я вызвал в 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 { report } = this.state;'):

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

Заранее спасибо за помощь

Answer 1

Чтобы загрузить файл в html5, вы можете установить тег привязки с атрибутом загрузки,

<a href="/reportOnAnswersCategory" download="data.csv" id="btnExport" >Export data into Excel</a>

И когда пользователь нажимает на ссылку, атрибут загрузки появляется в сохранении. В этом случае файл будет загружен как "data.csv"

Но чтобы передать 'answer:value' в API, вы можете изменить узел, чтобы он принимался как параметр запроса, и измените URL на href="/reportOnAnswersCategory?answer="+{value}Или ты можешь спрятать <a> используя стиль CSS,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);
});