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

  1. Итак, чтобы загрузить файл CSV, мы начнем с создания простой кнопки загрузки HTML с помощью MUI. Скопируйте и вставьте приведенный ниже код в файл app.js.
<Button sx={{height:'36px', fontSize:'12px', marginTop:'10px'}} onClick={handleDownloadReports} variant="contained">
       Download Report
 </Button>

2. Для того, чтобы загрузить ответ от API. давайте создадим экземпляр axios, который мы можем использовать для выполнения вызовов API во всем вашем проекте. Скопируйте и вставьте приведенный ниже код в файл utils.js.

export const getAuthorizationHeader = () => `Bearer ${Token}`;

// import axios from 'axios'

export const axiosInstance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Authorization': getAuthorizationHeader()
    }
});

3. Теперь давайте сделаем вызов API, чтобы получить ответ, который необходимо загрузить в формате CSV, чтобы вы могли использовать экземпляр axios для выполнения вызова API, который вы добавили на шаге 2, и с помощью Blob вы можете создать отчет для ответ, который вы получили.

const handleDownloadReports = () =>{
  const url = 'baseurl for download'
   axiosInstance(url , {
   headers: { Authorization: getAuthorizationHeader() }
  })
   .then(
    response => {
     console.log("response", response)
     const url = window.URL.createObjectURL(new Blob([response.data])) 
     const link = document.createElement('a')
     link.href = url
     const fileName = `downloaded Report ${moment(new Date()).format("DD MMM YY")}.csv`;
     link.setAttribute('download', fileName)
     document.body.appendChild(link)
     link.click()
     link.remove()
    }
   ).catch(
    error => {
       console.log(error)
    }
   ).finally(() => {
    // setTableLoading(false)
   })
 }

Так будет сгенерирован отчет и загружен файл. На основе поля столбца, которое было добавлено в ответ API, оно будет заполнено в листе отчета.

Вывод:

Спасибо, что прочитали!

Я надеюсь, что вы нашли эту статью полезной. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне стать лучше.

Не забудь подписаться⭐️