Почему, когда я добавляю событие 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);
});