Загрузка файла пользовательского интерфейса React/ Materiel с использованием серверной части REST API
мы уже видели, как скачать файл с помощью REST API на предыдущем (https://medium.com/@damureddy/download-a-file-from-springboot-rest-service-c10700f3e88d) теперь будем интегрировать REST API с React
Ниже приведен код, реализованный с использованием пользовательского интерфейса ReactJS+Material. В этом разделе рассматривается только код загрузки файла.
импортировать React из «реагировать»;
импортировать PropTypes из «prop-types»;
импортировать {withStyles} из «@material-ui/core/styles»;
импортировать таблицу из «@material-ui/core/Table»;
импортировать TableBody из «@material-ui/core/TableBody»;
импортировать TableCell из «@material-ui/core/TableCell»;
импортировать TableHead из «@material-ui/core/TableHead»;
импортировать TableRow из «@material-ui/core/TableRow»;
импортировать Paper из «@material-ui/core/Paper»;
импортировать аксиомы из «аксиос»;
импортировать {Button} из «@material-ui/core»;
константные стили = тема =› ({
корень: {
ширина: «100%»,
marginTop: тема.spacing.unit * 3,
переполнениеX: «авто»
},
Таблица: {
минШирина: 700
}
});
постоянные данные = [
{
заголовок: «Скачать файл-1»,
описание: «Расширенный двусторонний альянс»,
изображение: «Скачать файл-1.json»,
цена: «$74,96»
},
{
заголовок: «Скачать файл-2»,
описание: «Автоматизированная функция, управляемая спросом»,
изображение: «Скачать файл-2.json»,
цена: «$92,80»
},
{
title: «Скачать файл-3»,
описание: «Обратное контекстное групповое ПО»,
изображение: «Скачать файл-3.json»,
цена: «11,03$»
},
{
заголовок: «Скачать файл-4»,
описание: «Цифровая веб-иерархия»,
изображение: «Скачать файл-4.json»,
цена: «$42,72»
},
{
заголовок: «Скачать файл-5»,
описание: «Многоуровневый исполнительный графический интерфейс»,
изображение: «Скачать файл-5.json»,
цена: «35,49 долларов США»
}
];
класс SimpleTable расширяет React.Component {
конструктор (реквизит) {
супер (реквизит);
это.состояние = {
значения:данные
};
}
handleClick = (e) =› {
e.preventDefault();
console.log('Ссылка была нажата.');
console.log(это.состояние.значения);
// alert('Ссылка была нажата.');
// axios.get(‘/DwonlodedDataExport’).then(response =› {
// console.log(ответ)
// })
аксиос({
URL-адрес: ‘/files/saveJson’,
метод: «ПОЛУЧИТЬ»,
responseType: ‘blob’, // важно
}).then((ответ) =› {
const url = window.URL.createObjectURL (новый BLOB-объект ([response.data], {тип: «application/json»}));
константная ссылка = document.createElement('a');
ссылка.href = URL-адрес;
link.setAttribute('скачать', 'JSonfile');
document.body.appendChild (ссылка);
ссылка.щелчок();
});
};
handleClick1 = (e) =› {
e.preventDefault();
console.log('Ссылка была нажата.');
// alert('Ссылка была нажата.');
// axios.get(‘/DwonlodedDataExport’).then(response =› {
// console.log(ответ)
// })
аксиос({
URL-адрес: ‘/downLoadZIPFile’,
метод: «ПОЛУЧИТЬ»,
responseType: ‘blob’, // важно
}).then((ответ) =› {
const url = window.URL.createObjectURL (новый BLOB-объект ([response.data], {type: «application/octet-stream», responseType: «arraybuffer»}));
константная ссылка = document.createElement('a');
ссылка.href = URL-адрес;
link.setAttribute('скачать', 'JSONSearchResultsData.zip');
document.body.appendChild (ссылка);
ссылка.щелчок();
});
};
отображение данных () {
если (это.состояние.значения.длина!==0){
возвращение (
‹див›
‹див›
‹Название класса бумаги›
‹Имя класса таблицы›
‹Заголовок стола›
‹Строка таблицы›
‹TableCell align="center"›VIN‹/TableCell›
‹TableCell align="center"›Файл Nmae‹/TableCell›
‹TableCell align="center"›Цена‹/TableCell›
‹/TableRow›
‹/TableHead›
‹ТаблицаBody›
{this.state.values.map(строка =› (
‹TableRow key={row.id}›
‹TableCell align="center"›{row.title}‹/TableCell›
‹TableCell align="center"›
‹a href="" onClick={this.handleClick}›{row.image}‹/a›
‹/TableCell›
‹TableCell align="center"›{row.price}‹/TableCell›
‹/TableRow›
))}
‹/TableBody›
‹/дел›
‹див›
‹ Вариант кнопки = «содержится» цвет = «основной» alignitems = «центр» onClick = {this.handleClick1}
size="большой" style={{margin:20}}›
Скачать все файлы
‹/дел›
‹/дел›
);
// console.log(this.state.values.length)
}
}
оказывать(){
//const { классы, значения } = this.props;
возвращение (
‹див›
{this.dataDisplay()}
‹/дел›
);
}
}
SimpleTable.propTypes = {
классы: PropTypes.object.isRequired
};
экспортировать по умолчанию withStyles (стили) (SimpleTable);
