Как скачать файл в Реакции JS

Question

Я получаю URL файла в ответ от API.когда пользователь нажимает кнопку загрузки, файл должен быть загружен без открытия предварительного просмотра файла на новой вкладке.Как добиться этого в реакции JS?

Answer 1

Если вы используете React Router, используйте это:

<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>

Где /files/myfile.pdf находится внутри вашей папки public.

Answer 2

Запуск загрузки браузера из внешнего интерфейса не является надежным.

Что вам нужно сделать, это создать конечную точку, которая при вызове будет предоставлять правильные заголовки ответа, таким образом вызывая загрузку браузера.

Код переднего плана может сделать только так много.Атрибут 'download', например, может просто открыть файл на новой вкладке в зависимости от браузера.

Заголовки ответа, которые вам нужно посмотреть, это, вероятно, Content-Type и Content-Disposition.Вы должны проверить этот ответ для более подробного объяснения.

Answer 3

браузеры достаточно умны, чтобы обнаруживать ссылку и загружать ее непосредственно при нажатии на тег привязки без использования атрибута загрузки.

после получения ссылки на файл из API, просто используйте обычный javascript, создав тег привязкии удалите его, сразу же динамически щелкнув по нему.

const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

Answer 4

Это не связано с React.Однако вы можете использовать атрибут download в элементе привязки <a>, чтобы сообщить браузеру о загрузке файла.

<a href='/somefile.txt' download>Click to download</a>

Это поддерживается не во всех браузерах: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a