JS/jQuery

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

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

1

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

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

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

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

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

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

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

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

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

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

<button class="download">Скачать файл через AJAX</button>
$('.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();
        }
    });
});
03 марта 2019
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...