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

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

1

Пример использования

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

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

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

Сохранение файла jQuery

Если нужно запустить скачивание файла по кнопке, поможет 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

Также можно получить файл через 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 1107

Поделится

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

Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
Ниже приведён список MIME-заголовков и расширений файлов. В PHP скриптах, перед отправкой файлов в браузер,...
Примеры как зарегистрировать бота в Телеграм, описание и взаимодействие с основными методами API.
Пример как преобразовать массив в CSV и сохранить его диске или отдать на скачивание.
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....