Скачивание файла через JavaScript/jQuery в новом окне

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

Для начала процесса загрузки файла в JavaScript, создайте скрытый элемент <a>, установите для него атрибут href, указывающий на файл, и инициируйте событие клика с помощью метода click(). Пример кода представлен ниже:

function downloadFile(url, fileName) {
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.style.display = 'none';
  document.body.appendChild(a); 
  a.click();
  document.body.removeChild(a); 
}

// Пример использования: downloadFile('url/к/файлу', 'название-файла.ext');

Убедитесь, что указанный URL доступен, чтобы предотвратить возможные ошибки CORS, а также проверьте совместимость файла с различными браузерами.

Интересный прием с использованием IFrames

Элемент <iframe> может служить альтернативой элементу <a> при реализации сложных сценариев загрузки файлов или сохранении текущего состояния страницы.

function downloadUsingIframe(url) { 
  $('<iframe>', {
    style: 'display: none;',
    src: url 
  }).appendTo('body').on('load', function() {
    $(this).remove(); 
  });
}

Проверьте, что сервер настроен на отправку заголовка Content-Disposition или MIME-типа application/octet-stream.

Использование fetch и blob'ов

API fetch — отличный инструмент для работы с большими файлами или потоками данных. В сочетании с window.URL.createObjectURL он позволяет эффективно управлять blob'ами.

fetch('file_url').then(response => {
  if (!response.ok) throw new Error('Network response was not ok');
  return response.blob();
}).then(blob => {
  const url = window.URL.createObjectURL(blob);
  downloadFile(url, 'filename.ext'); 
  window.URL.revokeObjectURL(url);
});

После завершения загрузки файла обязательно освободите URL, чтобы оптимизировать использование памяти.

Загрузка в фоновом режиме: плавная работа

Для комфортного взаимодействия с пользователем избегайте открытия новых вкладок или окон. Воспользуйтесь плагином jQuery File Download или атрибутом download элементов <a>, указывая имя файла без потери контекста.

function downloadInBackground(url, fileName) {
  $('<a>', {
    href: url,
    download: fileName
  }).appendTo(document.body)[0].click();
  $('a[download]').remove(); 
}

Совместимость атрибута download вы можете проверить на сайте caniuse.com.

Тихие агенты загрузки

При загрузке файла старайтесь сохранять текущее состояние страницы, информируя пользователей о процессе через модальное окно или новую вкладку. Используйте функции обратного вызова для обработки различных результатов загрузки в fetch или AJAX.

Визуализация

Вашей задачей является запуск загрузки файла, используя промисы:

Задание: Созвездие Загрузки 🚀

A: Запуск процесса загрузки. <a href="file_url" download>Запуск команды...</a>

B: Прохождение через путь промисов. Загрузка... 0% --------------------[🚀]------------------- 100%

C: Сбор информации. response.blob()... Данные получены!

D: Возвращение домой. URL.createObjectURL(dataBlob)... Подготовка к возвращению.

Итоги миссии: 🚀

• Запуск: Успешно [✅]
• Сбор данных: Завершен [✅]
• Возвращение и сохранение: Выполнено [💾✅]

Миссия завершена: файл успешно доставлен пользователю!

Браузеры и внимание к деталям

Атрибут download поддерживается большинством браузеров, однако старые версии могут требовать дополнительных действий.

Поддержка в старых браузерах

Для старых версий браузеров, которые не поддерживают атрибут download, возможно использование серверного скрипта или альтернативного решения на JavaScript.

// PHP скрипт для принудительного скачивания файла
header('Content-Disposition: attachment; filename="filename.ext"');
readfile('/path/to/the/file.ext');

Или второй вариант на JavaScript:

function fallbackDownload(url) {
  if (!('download' in document.createElement('a'))) {
    window.location.href = url; 
  }
}

// Пример использования: fallbackDownload('url/к/файлу');

Подробнее об этом расскажет наш спикер на видео

Настройки сервера

Для обеспечения бесперебойного процесса загрузки нужно правильно настроить сервер, установив нужные MIME-типы и заголовки Content-Type: application/octet-stream и Content-Disposition: attachment; filename="example.ext". Для решения более сложных задач используйте Axios или jQuery Ajax.

Управление AJAX-загрузками

Основная проблема загрузки файлов через AJAX заключается в несовместимости XMLHttpRequest и fetch. Вот решение этой задачи:

$.ajax({
  url: 'server_endpoint',
  method: 'GET',
  xhrFields: {
    responseType: 'blob' 
  },
  success: function(data) {
    const url = window.URL.createObjectURL(data);
    downloadFile(url, 'report.pdf'); 
    window.URL.revokeObjectURL(url);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Ошибка загрузки:', textStatus, errorThrown); 
  }
});

Такой подход позволяет пользователь продолжать работу на текущей странице во время загрузки файла в фоновом режиме.

Полезные материалы

1. Использование Fetch API – Веб-API | MDN — подробное руководство MDN по использованию Fetch.
2. Метод jQuery ajax() — детальная информация о методе ajax() в jQuery.
3. javascript – Handle file download from ajax post – Stack Overflow — сборник решений и практических примеров для загрузки файлов через Ajax от сообщества Stack Overflow.
4. GitHub – eligrey/FileSaver.js: HTML5 FileSaver saveAs() Interface — библиотека с функцией saveAs() для сохранения файлов на стороне клиента.
5. How to create a file and generate a download with JavaScript in the Browser (without a server) | Our Code World — как создавать и скачивать файлы через JavaScript без использования сервера.
6. Getting started | Axios Docs — введение в promise-ориентированный HTTP-клиент Axios. Интересная альтернатива Fetch.
7. GitHub – jimmywarting/StreamSaver.js: Write streams to the filesystem directly asynchronously — библиотека для работы с потоками и асинхронным сохранением в файловой системе.