JavaScript Скачать

Скачивание файлов с помощью JavaScript

Скачивание файлов с помощью JavaScript является распространенной задачей веб-разработки. В этом ответе я подробно расскажу о различных подходах к реализации скачивания файлов, предоставлю примеры кода и объясню, как они работают.

1. Ссылка с атрибутом "download":

Один из самых простых способов скачивания файлов в JavaScript - это использование <a> элемента с атрибутом "download". В качестве значения этого атрибута указывается имя файла, который должен быть скачан. Например:

<a href="path/to/file.pdf" download="filename.pdf">Скачать</a>

При клике на эту ссылку, файл "path/to/file.pdf" будет скачан с именем "filename.pdf". Этот подход работает только для относительных ссылок, т.е. файлы должны находиться на том же домене, что и страница.

2. Использование XMLHttpRequest:

Другой способ скачивания файлов - это использование XMLHttpRequest. Можно отправить GET-запрос на сервер для получения файла и затем сохранить его на устройстве пользователя с использованием JavaScript FileWriter API. Вот пример кода:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/file.pdf', true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    var blob = new Blob([xhr.response], { type: 'application/pdf' });
    var downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(blob);
    downloadLink.download = 'filename.pdf';
    downloadLink.click();
  }
};

xhr.send();

Этот код отправляет GET-запрос на сервер, ожидает ответ в формате blob и создает ссылку для скачивания файла "filename.pdf".

3. Использование fetch API:

С последней версией JavaScript появился fetch API, который может быть использован для отправки HTTP-запросов и получения файлов. Вот пример кода:

fetch('path/to/file.pdf')
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    var downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(blob);
    downloadLink.download = 'filename.pdf';
    downloadLink.click();
  });

Этот код отправляет GET-запрос с помощью fetch API, получает ответ в формате blob и создает ссылку для скачивания файла "filename.pdf".

4. Использование библиотек:

Также можно использовать готовые библиотеки для скачивания файлов с помощью JavaScript, такие как FileSaver.js или js-file-download. Они предоставляют удобные методы для скачивания файлов и абстрагируют от сложностей низкоуровневой работы с API.

Вот пример использования FileSaver.js:

var file = new Blob(['Hello, World!'], { type: 'text/plain' });
saveAs(file, 'filename.txt');

Этот код создает файл с текстом "Hello, World!" в формате txt и скачивает его с именем "filename.txt" с помощью FileSaver.js.

Вывод: