Загрузка и сохранение файла в Angular 2+ с WebApi/MVC

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

В Angular для загрузки файлов вы можете применить модуль HttpClient. Файл представляется в формате Blob, а для вызова диалогового окна сохранения используется библиотека FileSaver.js. Пример данного подхода:

import { HttpClient } from '@angular/common/http';
import { saveAs } from 'file-saver';

constructor(private http: HttpClient) {}

downloadFile(url: string, filename: string): void {
  this.http.get(url, { responseType: 'blob' })
    .subscribe(blob => saveAs(blob, filename));
}

Основные моменты:

• Опция responseType: 'blob' предназначена для обработки двоичных данных.
• Функция saveAs из пакета FileSaver.js используется для сохранения файла на диск.

Прямая загрузка с минимальным количеством зависимостей

Если вы предпочитаете обходиться без лишних библиотек, можно применить метод прямого создания ссылки для загрузки:

constructor(private http: HttpClient) {}

downloadFile(url: string, filename: string): void {
  this.http.get(url, { responseType: 'blob' }).subscribe(blob => {
    const fileURL = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = fileURL;
    link.download = filename;
    link.click();

    window.URL.revokeObjectURL(fileURL);
  });
}

Преимущества:

• Отсутствие зависимости от сторонних библиотек.
• Применение "чистого" JavaScript.
• Инициацию загрузки файла осуществляет код.

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

Сравним процесс загрузки файла с процессом доставки посылки. HTTP GET-запросом вы делаете заказ:

Оформление заказа [HTTP GET запрос] ----> Забор груза [Сервер]

Объект blob — это ваш пакет, а запрос на его получение — это поездка за пакетом:

Поездка за пакетом [HTTP GET запрос] ----> [Получение (Blob)] ----> Возвращение ----> Доставка

Поздравляем, файл загружен! Вы получили свой "пакет":

Доставка завершена: "Вот ваша посылка! (Файл загружен)"

Обработка возможных ошибок при загрузке

С загрузкой файлов могут возникнуть непредвиденные проблемы. Вот пример адекватной реакции на неудачи:

downloadFile(url: string, filename: string): void {
  this.http.get(url, { responseType: 'blob' })
    .subscribe(
      blob => saveAs(blob, filename),
      error => console.error('ОШИБКА ЗАГРУЗКИ:', error)
    );
}

Советы по успешной загрузке файлов в Angular

Загрузка файлов — это не так уж сложная задача, если соблюдать несколько условий:

• responseType: 'blob': Убедитесь, что ваши запросы настроены на прием двоичных данных.
• Централизация логики загрузки: Наилучшим решением будет создание специального сервиса для управления загрузками.
• FileSaver.js: Эта библиотека может значительно облегчить задачу при необходимости обеспечения совместимости с различными браузерами и при выполнении сложных операций сохранения.

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

1. Angular — Детальное руководство по использованию HTTP-клиента в Angular.
2. GitHub – eligrey/FileSaver.js: — Полифил saveAs() для сохранения файлов на стороне клиента.
3. stackoverflow – загрузка файлов в Angular — Дискуссия о методах загрузки в Angular.
4. Загрузка файлов в Angular – Полное руководство — Руководство по работе с файлами и данными в Angular.
5. RxJS — Менеджмент асинхронности в Angular с помощью RxJS.
6. Отправка и прием двоичных данных – Веб-API | MDN — Информация о передаче двоичных данных через веб-API.
7. Techiediaries — Методология работы с Blob в Angular.