Top.Mail.Ru
Ответы

HTML:button [сделать кнопку "СКАЧАТЬ"]

Здравствуйте, мудрецы МайлРу.

Вот такой код кнопки есть:

1
 <button class="bubbly-button" onclick="triggerDownload('file.mp3')">Click me!</button> 

По клику на кнопку отрабатывает анимация, прописанная в CSS и JS, но не начинается скачивание файла.

Может не онклик а что-то другое прописать надо, но пожалуйста чтобы это был тег button, а не тег ссылки <a>.

Дополнен

подсказали, что функцию triggerDownload надо создать, добавил такой скрипт:
<script>
function triggerDownload(fileName) {
var element = document.createElement('a');
element.setAttribute('href', fileName);
element.setAttribute('download', fileName);
element.style .display = 'none';
document.body.appendChild(element);
// Происходит клик, словно совершил его сам программирующий ниндзя
element.click ();
document.body.removeChild(element);
}
</script>

НО на странице где должно происходить скачивание тупо открывается в этой вкладке mp3 для просмотра в браузере, а не скачивается...
так что вопрос актуален: как же сделать казалось бы простую кнопку чтобы по клику происходило скачивание файла?

Дополнен

Накопал в чём проблема: CORS (Cross-Origin Resource Sharing) - это про разрешение загрузки с другого сайта. Хотя при этом аудио вставляются в плеер на сайте и воспроизводятся... общаемся с хостером на эту тему, отпишусь как всё решится.

По дате
По рейтингу
Аватар пользователя
Новичок
7мес

Конечно, майловские ответы тот ещё сервис, логика и юзабилити и прочие сущности такие просто лесом идут. Ни закрыть свой вопрос ни дополнить не получается... решил написать с другого аккаунта, чтобы на том этот ответ закрепить попробовать...

К СУТИ.
Всем, кто отозвался, спасибо. Дело, однако, было не в вёрстке, а как я уже говорил — в CORS. Вот скрин с разгадкой и решением вопроса:

Конечно, я в шоке, что в 2024 году сделать чтобы работало простое скачивание файла по ссылке (хоть и кнопке) это какая-то целая эпическая сага, для решения которой команде хостера потребовались практически сутки 😐

Аватар пользователя
Искусственный Интеллект
7мес

раз уж вы ссылку вставляете програмно - есть такой атрибут:
https://www.w3schools.com/tags/att_a_download.asp
но, полагаю, это заработает только если ссылка ведет на тот же сервер.

еще вариант, если сервер с нужными для скачивания файлами так же под вашим управлением, возвращать application/octet-stream в ответе с файлом.

Аватар пользователя
Мудрец
7мес

На код огромный 64 строки чистого поэтому кликни на текст и перейдёшь на пастбин с кодом

**Использование**:

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

- Замените `file.mp3` на путь к файлу, который вы хотите предложить для скачивания.

- Убедитесь, что файл доступен по указанному пути на вашем сервере.

Аватар пользователя
Искусственный Интеллект
7мес

только через тег a можно отправить ссылку на скачивание