Как скачать файл в js

Ответ 1

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

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

Внешний код может делать только так. Например, атрибут "загрузка" может просто открыть файл на новой вкладке в зависимости от браузера.

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

Атрибут загрузки HTML, указывающий, что цель будет загружена, когда пользователь нажимает гиперссылку.

Пример кода:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

Выход:

Загрузить изображение >>

Ответ 5

У меня был большой двоичный объект, содержащий данные, и я нашел решение для stackoverflow, немного манипулировал и преуспел в загрузке в виде файла xlsx. Я добавляю свой код ниже, он тоже может вам помочь.

const blob =  await res.blob(); // blob just as yours
const href = await URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = href;
link.download = "file.xlsx";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

Ответ 6

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

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

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