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

03.03.2019

49665

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

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

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

HTML

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

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

HTML

Сохранение файла 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;
});

Сохранение файла 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();
		}
	});
});