В одном из проектов столкнулся со следующей задачей:
Необходимо реализовать возможность скачивания файла. При этом, если это картинка, она не должна открываться в вкладке браузера. Должно происходить именно скачивание.
С одной стороны, можно воспользоваться атрибутом тега a под названием download, но здесь есть проблема — этот атрибут не поддерживается IE 10 версии.
На просторах сети нашёл следующее решение:
/**
* crossbrowser download
* @param url
* @param fileName
*/
function cross_download(url, fileName) {
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "blob";
var __fileName = fileName;
req.onload = function (event) {
var blob = req.response;
var contentType = req.getResponseHeader("content-type");
if (window.navigator.msSaveOrOpenBlob) {
// Internet Explorer
window.navigator.msSaveOrOpenBlob(new Blob([blob], {type: contentType}), fileName);
} else {
var link = document.createElement('a');
document.body.appendChild(link);
link.download = __fileName;
link.href = window.URL.createObjectURL(blob);
link.click();
document.body.removeChild(link); //remove the link when done
}
};
req.send();
}
Собственно данная функция инициирует XMLHttpRequest к необходимому файлу на сервере, получает его содержимое и формирует скрытую ссылку внутри body с атрибутом download, открывает её, а затем удаляет. В случае же, если пользователь использует IE и есть возможность воспользоваться window.navigator.msSaveOrOpenBlob, происходит корректное скачивание файла в IE.
Пример использования:
cross_download("/upload/file.jpg", "file.jpg");
Здесь /upload/file.jpg — относительный путь до файла, который необходимо скачать, а второй параметр = file.jpg — под каким именем скачать файл.