Методы загрузки файлов JavaScript: элемент привязки, API-интерфейс Fetch и FileSaver.js.

Чтобы загрузить файл с помощью JavaScript, вы можете использовать несколько методов. Вот некоторые из них:

Метод 1: использование элемента привязки
Вы можете создать динамический элемент привязки и имитировать событие щелчка по нему, чтобы инициировать загрузку файла.

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

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

var fileUrl = 'https://example.com/file.pdf';
var fileName = 'myfile.pdf';
downloadFile(fileUrl, fileName);

Метод 2. Использование API-интерфейса Fetch
Вы можете использовать API-интерфейс Fetch, чтобы выполнить запрос GET к URL-адресу файла, а затем сохранить ответ в виде файла.

function downloadFile(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    });
}

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

var fileUrl = 'https://example.com/file.pdf';
var fileName = 'myfile.pdf';
downloadFile(fileUrl, fileName);

Метод 3: использование библиотеки FileSaver.js
Вы также можете использовать библиотеку FileSaver.js, которая обеспечивает удобный способ сохранения файлов на стороне клиента.

Сначала подключите в свой проект библиотеку FileSaver.js:

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

Затем вы можете использовать библиотеку для сохранения файла:

function downloadFile(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, filename);
    });
}

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

var fileUrl = 'https://example.com/file.pdf';
var fileName = 'myfile.pdf';
downloadFile(fileUrl, fileName);