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