В этой статье я научу вас, как максимально простым способом экспортировать данные в формате CSV в ReactJS. Когда вам нужно загрузить отчет из ответа API и сохранить его в формате csv. Итак, давайте посмотрим, как мы можем сделать это наиболее эффективным и простым способом.
- Итак, чтобы загрузить файл 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, оно будет заполнено в листе отчета.
Вывод:
Спасибо, что прочитали!
Я надеюсь, что вы нашли эту статью полезной. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне стать лучше.
Не забудь подписаться⭐️