Скачивание файла через jQuery.Ajax из Struts2 action

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Сначала отметим, что загрузка файла может быть успешно реализована даже без использования jQuery AJAX. Вместо этого воспользуйтесь надежным XMLHttpRequest. Установите свойство responseType в 'blob'. После завершения загрузки создайте элемент <a> с href, указывающим на URL объекта blob, и с атрибутом download, который будет определять имя файла. Затем инициируйте загрузку, активировав метод .click() у созданной ссылки:

JS
Скопировать код
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-код идеально подходит для сценариев загрузки файлов в ваших текущих проектах.

Кинга Идем в IT: пошаговый план для смены профессии

Альтернатива через Fetch API

Если вам представляется, что XMLHttpRequest устарел, ознакомьтесь с Fetch API — более современным и удобным инструментом для работы с запросами, который поддерживает промисы и способствует улучшению пользовательского опыта. Вот эффективная замена:

JS
Скопировать код
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.

JS
Скопировать код
$(document).on('click', '#download-button', function() {
    $.fileDownload('file_url', {
        successCallback: function () {
            alert('Успешная загрузка!');
        },
        failCallback: function () {
            alert('Произошла ошибка. Попробуйте еще раз!');
        }
    });
});

Не упускайте из виду возможности библиотеки FileSaver.js, которая предлагает обширный набор функций для сохранения файлов на клиентской стороне.

Работа с крупными файлами

Когда речь заходит о больших файлах, возникают определенные сложности: их размер может серьёзно замедлить работу приложения из-за нагрузки на память и CPU. В таких ситуациях рекомендуется использовать Streams или преимущества Blob, разбивая файлы на части по мере необходимости для оптимальной обработки.

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой объект используется для загрузки файла в примере с XMLHttpRequest?
1 / 5
Свежие материалы