Скачивание файла через jQuery.Ajax из Struts2 action
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Сначала отметим, что загрузка файла может быть успешно реализована даже без использования jQuery AJAX. Вместо этого воспользуйтесь надежным XMLHttpRequest
. Установите свойство responseType
в 'blob'
. После завершения загрузки создайте элемент <a>
с href
, указывающим на URL объекта blob, и с атрибутом download
, который будет определять имя файла. Затем инициируйте загрузку, активировав метод .click()
у созданной ссылки:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'file_url', true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) { // Проверяем успешность загрузки...
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(xhr.response);
downloadLink.download = 'desired_filename.ext'; // Задаём желаемое имя файла
downloadLink.style.display = 'none';
document.body.appendChild(downloadLink);
downloadLink.click(); // Инициируем загрузку
document.body.removeChild(downloadLink); // Очищаем DOM
URL.revokeObjectURL(downloadLink.href); // Освобождаем память
}
};
xhr.send();
Данный JavaScript-код идеально подходит для сценариев загрузки файлов в ваших текущих проектах.
Альтернатива через Fetch API
Если вам представляется, что XMLHttpRequest
устарел, ознакомьтесь с Fetch API — более современным и удобным инструментом для работы с запросами, который поддерживает промисы и способствует улучшению пользовательского опыта. Вот эффективная замена:
fetch('file_url')
.then(response => response.blob()) // Получаем Blob
.then(blob => {
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'desired_filename.ext'; // Устанавливаем имя файла
document.body.appendChild(downloadLink);
downloadLink.click(); // Инициируем загрузку
document.body.removeChild(downloadLink); // Очищаем следы
URL.revokeObjectURL(downloadLink.href);
})
.catch(e => console.error('Возникла ошибка:', e));
Улучшение UX с помощью jQuery и плагинов
Пользовательский опыт можно приставить к столу в изысканном ресторане, где обратная связь играет ключевую роль. Прогресс загрузки или уведомления об ошибках станут заметными и эффективными, если вы будете использовать такие плагины, как jQuery File Download.
$(document).on('click', '#download-button', function() {
$.fileDownload('file_url', {
successCallback: function () {
alert('Успешная загрузка!');
},
failCallback: function () {
alert('Произошла ошибка. Попробуйте еще раз!');
}
});
});
Не упускайте из виду возможности библиотеки FileSaver.js, которая предлагает обширный набор функций для сохранения файлов на клиентской стороне.
Работа с крупными файлами
Когда речь заходит о больших файлах, возникают определенные сложности: их размер может серьёзно замедлить работу приложения из-за нагрузки на память и CPU. В таких ситуациях рекомендуется использовать Streams или преимущества Blob, разбивая файлы на части по мере необходимости для оптимальной обработки.