HTML:button [сделать кнопку "СКАЧАТЬ"]
Здравствуйте, мудрецы МайлРу.
Вот такой код кнопки есть:
<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) - это про разрешение загрузки с другого сайта. Хотя при этом аудио вставляются в плеер на сайте и воспроизводятся... общаемся с хостером на эту тему, отпишусь как всё решится.
Конечно, майловские ответы тот ещё сервис, логика и юзабилити и прочие сущности такие просто лесом идут. Ни закрыть свой вопрос ни дополнить не получается... решил написать с другого аккаунта, чтобы на том этот ответ закрепить попробовать...
К СУТИ.
Всем, кто отозвался, спасибо. Дело, однако, было не в вёрстке, а как я уже говорил — в CORS. Вот скрин с разгадкой и решением вопроса:

Конечно, я в шоке, что в 2024 году сделать чтобы работало простое скачивание файла по ссылке (хоть и кнопке) это какая-то целая эпическая сага, для решения которой команде хостера потребовались практически сутки 😐
раз уж вы ссылку вставляете програмно - есть такой атрибут:
https://www.w3schools.com/tags/att_a_download.asp
но, полагаю, это заработает только если ссылка ведет на тот же сервер.
еще вариант, если сервер с нужными для скачивания файлами так же под вашим управлением, возвращать application/octet-stream в ответе с файлом.
На код огромный 64 строки чистого поэтому кликни на текст и перейдёшь на пастбин с кодом
**Использование**:
- Чтобы использовать этот код, разместите его в HTML-документе.
- Замените `file.mp3` на путь к файлу, который вы хотите предложить для скачивания.
- Убедитесь, что файл доступен по указанному пути на вашем сервере.
только через тег a можно отправить ссылку на скачивание