Скачивание файла через 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, разбивая файлы на части по мере необходимости для оптимальной обработки.