Отдача файлов на скачивание в браузере

С появлением атрибута download у ссылок, появилась возможность указать браузеру что файл в href="" нужно сохранить на диске.

1
<a href="/img/download.png" download>Скачать файл</a>
HTML

В атрибуте можно указать имя файла, которое будет использоваться при сохранении.

<a href="/img/download.png" download="новое_имя_файла.png">Скачать файл</a>
HTML
2

Если нужно запустить скачивание файла по кнопке, поможет jQuery. По событию onclick у кнопки, создается, но не выводится ссылка с атрибутом download, далее по ней происходит программный клик.

<button class="download">Скачать файл</button>
HTML
$('.download').on('click', function(){
	var link = document.createElement('a');
	link.setAttribute('href', '/download.png');
	link.setAttribute('download', 'download.png');
	link.click();
	return false;
});
JS
3

Также можно получить файл через AJAX и отдать его на скачивание. Это удобно если файл генерируется PHP-скриптом на лету с переданными ему GET/POST параметрами.

После выполнения запроса в бинарном режиме, создается ссылка с атрибутом download и данными в формате blob.

<button class="download">Скачать файл через AJAX</button>
HTML
$('.download').on('click', function(){
	$.ajax({
		url: '/download.png',
		dataType: 'binary',
		xhrFields: {
			'responseType': 'blob'
		},
		success: function(data, status, xhr) {
			var blob = new Blob([data], {type: xhr.getResponseHeader('Content-Type')});
			var link = document.createElement('a');
			link.href = window.URL.createObjectURL(blob);
			link.download = 'download.png';
			link.click();
		}
	});
});
JS
03.03.2019, обновлено 30.08.2019
49512

Комментарии 2

Timur S Timur S
6 апреля 2021 в 18:53
Была задачка у меня массово скачать фотки, там и не справился в итоге )
Иван Орлов Иван Орлов
23 июля 2023 в 18:07
Подскажите, делаю вторым способом, но вместо открытия окна сохранения файла видео, открывается просто страница с видео в браузере, почему так?

, чтобы добавить комментарий.

Другие публикации

Загрузка изображений с превью AJAX + PHP + MySQL
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных...
31116
+22
Работа с JSON в PHP
JSON (JavaScript Object Notation) – текстовый формат обмена данными, основанный на JavaScript, который представляет собой набор пар {ключ: значение}. Значение может быть массивом, числом, строкой и...
113900
+14
Local Storage и Session Storage в JavaScript
Web Storage API это набор методов, при помощи которых в браузере можно хранить данные в виде пар ключ=значение на...
14849
+3
Работа с FTP в PHP
Протокол FTP – предназначен для передачи файлов на удаленный хост. В PHP функции для работы с FTP как правило всегда доступны и не требуется установка дополнительного расширения.
18377
+2
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
24872
+7
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43537
+34