В одном из проектов столкнулся со следующей задачей:
Необходимо реализовать возможность скачивания файла. При этом, если это картинка, она не должна открываться в вкладке браузера. Должно происходить именно скачивание.
С одной стороны, можно воспользоваться атрибутом тега 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
— под каким именем скачать файл.