Как загрузить файл с Angular2
у меня есть приложение WebApi / MVC, для которого я разрабатываю клиент angular2 (для замены MVC). У меня возникли проблемы с пониманием того, как Angular сохраняет файл.
запрос в порядке (отлично работает с MVC, и мы можем регистрировать полученные данные), но я не могу понять, как сохранить загруженные данные (я в основном следую той же логике, что и в этот пост). Я уверен, что это глупо просто, но до сих пор я просто не понимаю этого.
код компонентная функция ниже. Я пробовал разные альтернативы, путь blob должен быть способом, насколько я понял, но нет функции createObjectURL
на URL
. Я даже не могу найти определение URL
в окне, но, по-видимому, он существует. Если я использую FileSaver.js
модуль я получаю ту же ошибку. Поэтому я думаю, что это то, что изменилось недавно или еще не реализовано. Как запустить сохранение файла в A2?
downloadfile(type: string){
let thefile = {};
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
let url = window.URL.createObjectURL(thefile);
window.open(url);
}
ради полнота, служба, которая извлекает данные, ниже, но единственное, что она делает, это выдавать запрос и передавать данные без сопоставления, если это удастся:
downloadfile(runname: string, type: string){
return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
.catch(this.logAndPassOn);
}
Примечание: я знаю, что это не минимальный рабочий пример, но я приложил много усилий на описание проблемы. Если вы собираетесь downvote, пожалуйста, оставьте комментарий, а также.
18 ответов
проблема в том, что наблюдаемый запуск в другом контексте, поэтому при попытке создать URL var у вас есть пустой объект, а не blob, который вы хотите.
один из многих способов, которые существуют для решения этой проблемы выглядит следующим образом:
this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
error => console.log("Error downloading the file."),
() => console.info("OK");
когда запрос будет готов, он вызовет функцию "downloadFile", которая определяется следующим образом:
downloadFile(data: Response){
var blob = new Blob([data], { type: 'text/csv' });
var url= window.URL.createObjectURL(blob);
window.open(url);
}
blob был создан отлично, и поэтому URL var, если не открывает новое окно, пожалуйста, проверьте, что вы уже импортировали 'rxjs / Rx';
import 'rxjs/Rx' ;
надеюсь, это поможет вам.
попробовать этой!
1-установка зависимостей для отображения всплывающего окна сохранить / открыть файл
npm install file-saver --save
npm install @types/file-saver --save
2-Создайте службу с этой функцией для получения данных
downloadFile(id): Observable<Blob> {
let options = new RequestOptions({responseType: ResponseContentType.Blob });
return this.http.get(this._baseUrl + '/' + id, options)
.map(res => res.blob())
.catch(this.handleError)
}
3-в компоненте проанализируйте blob с помощью "file-saver"
import {saveAs as importedSaveAs} from "file-saver";
this.myService.downloadFile(this.id).subscribe(blob => {
importedSaveAs(blob, this.fileName);
}
)
это работает для меня!
Если вам не нужно добавлять заголовки в запрос, для загрузки файла в Angular2 вы можете сделать простое:
window.location.href='http://example.com/myuri/report?param=x';
в своем компоненте.
скачать *.zip решение для угловой 2.4.x: необходимо импортировать ResponseContentType из '@angular / http ' и изменить responseType на ResponseContentType.ArrayBuffer(по умолчанию это ResponseContentType.В JSON)
getZip(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
let headers = this.setHeaders({
'Content-Type': 'application/zip',
'Accept': 'application/zip'
});
return this.http.get(`${environment.apiUrl}${path}`, {
headers: headers,
search: params,
responseType: ResponseContentType.ArrayBuffer //magic
})
.catch(this.formatErrors)
.map((res:Response) => res['_body']);
}
как отметил Алехандро Коредоре это простая ошибка охвата. The subscribe
выполняется асинхронно и open
должны быть помещены в этом контексте, так что данные закончили загрузку, когда мы запускаем загрузку.
тем не менее, есть два способа сделать это. Как рекомендуют документы, служба заботится о получении и сопоставлении данных:
//On the service:
downloadfile(runname: string, type: string){
var headers = new Headers();
headers.append('responseType', 'arraybuffer');
return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
.map(res => new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
.catch(this.logAndPassOn);
}
затем на компоненте мы просто подписываемся и имеем дело с сопоставленными данными. Есть два возможности. первый, как указано в исходном посте, но нуждается в небольшой коррекции как отметил Алехандро:
//On the component
downloadfile(type: string){
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(data => window.open(window.URL.createObjectURL(data)),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
}
второй можно было бы использовать FileReader. Логика та же, но мы можем явно ждать FileReader для загрузки данных, избегая вложенности и решения проблемы асинхронности.
//On the component using FileReader
downloadfile(type: string){
var reader = new FileReader();
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(res => reader.readAsDataURL(res),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
reader.onloadend = function (e) {
window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no');
}
}
Примечание: Я пытаюсь загрузить файл Excel, и хотя загрузка запускается (так что это ответы на вопрос), файл поврежден. Посмотреть ответ на этот пост на избежать поврежденного файла.
Это для людей, которые ищут, как это сделать с помощью HttpClient и file-saver:
- установить файл-saver
npm установить файл-saver --save
npm install @types / file-saver --сохранить
класс обслуживания API:
export() {
return this.http.get(this.download_endpoint,
{responseType: 'blob'});
}
компоненты:
import { saveAs } from 'file-saver';
exportPdf() {
this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}
загрузка файла через ajax всегда является болезненным процессом, и, на мой взгляд, лучше всего позволить серверу и браузеру выполнять эту работу по согласованию типов контента.
Я думаю, что лучше всего иметь
<a href="api/sample/download"></a>
сделать это. Это даже не требует открытия новых окон и тому подобного.
контроллер MVC, как в вашем примере, может быть похож на следующий:
[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
// ...
return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}
Как насчет этого?
this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
.catch((err)=>{return [do yourself]})
.subscribe((res:Response)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(res.blob());
a.download = fileName;
// start download
a.click();
})
Я мог бы это сделать.
нет необходимости дополнительного пакета.
скачать и показать PDF файлы, очень похожий код обрезается, как показано ниже:
private downloadFile(data: Response): void {
let blob = new Blob([data.blob()], { type: "application/pdf" });
let url = window.URL.createObjectURL(blob);
window.open(url);
}
public showFile(fileEndpointPath: string): void {
let reqOpt: RequestOptions = this.getAcmOptions(); // getAcmOptions is our helper method. Change this line according to request headers you need.
reqOpt.responseType = ResponseContentType.Blob;
this.http
.get(fileEndpointPath, reqOpt)
.subscribe(
data => this.downloadFile(data),
error => alert("Error downloading file!"),
() => console.log("OK!")
);
}
для тех, кто использует шаблон Redux
я добавил в файловую заставку как @Hector Cuevas, названный в его ответе. Используя Angular2 V. 2.3.1, мне не нужно было добавлять @types / file-saver.
следующий пример-загрузка журнала в формате PDF.
журнал действий
public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS,
payload: { referenceId: referenceId }
};
}
public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
payload: { blob: blob }
};
}
журнал эффекты
@Effect() download$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS)
.switchMap(({payload}) =>
this._journalApiService.downloadJournal(payload.referenceId)
.map((blob) => this._actions.downloadJournalsSuccess(blob))
.catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
);
@Effect() downloadJournalSuccess$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
.map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))
журнал сервис
public downloadJournal(referenceId: string): Observable<any> {
const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
return this._http.getBlob(url);
}
служба HTTP
public getBlob = (url: string): Observable<any> => {
return this.request({
method: RequestMethod.Get,
url: url,
responseType: ResponseContentType.Blob
});
};
журнал редуктор хотя это только устанавливает правильные состояния, используемые в нашем приложении, я все еще хотел добавить его, чтобы показать полный шаблон.
case JournalActions.DOWNLOAD_JOURNALS: {
return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}
case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}
Я надеюсь, что это полезно.
Я разделяю решение, которое помогло мне (любое улучшение благодарностью)
на сервис 'pservice':
getMyFileFromBackend(typeName: string): Observable<any>{
let param = new URLSearchParams();
param.set('type', typeName);
// setting 'responseType: 2' tells angular that you are loading an arraybuffer
return this.http.get(http://MYSITE/API/FILEIMPORT, {search: params, responseType: 2})
.map(res => res.text())
.catch((error:any) => Observable.throw(error || 'Server error'));
}
компонент детали :
downloadfile(type: string){
this.pservice.getMyFileFromBackend(typename).subscribe(
res => this.extractData(res),
(error:any) => Observable.throw(error || 'Server error')
);
}
extractData(res: string){
// transforme response to blob
let myBlob: Blob = new Blob([res], {type: 'application/vnd.oasis.opendocument.spreadsheet'}); // replace the type by whatever type is your response
var fileURL = URL.createObjectURL(myBlob);
// Cross your fingers at this point and pray whatever you're used to pray
window.open(fileURL);
}
в компонентной части вы вызываете службу без подписки на ответ. Оформление подписки полный список типов mime openOffice см. В разделе:http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html
для более новых угловых версий:
npm install file-saver --save
npm install @types/file-saver --save
import {saveAs} from 'file-saver/FileSaver';
this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
.subscribe(blob => {
saveAs(blob, 'download.pdf');
});
Я использую Angular 4 с объектом 4.3 httpClient. Я изменил ответ, который нашел в техническом блоге Js, который создает объект ссылки, использует его для загрузки, а затем уничтожает его.
клиент:
doDownload(id: number, contentType: string) {
return this.http
.get(this.downloadUrl + id.toString(), { headers: new HttpHeaders().append('Content-Type', contentType), responseType: 'blob', observe: 'body' })
}
downloadFile(id: number, contentType: string, filename:string) {
return this.doDownload(id, contentType).subscribe(
res => {
var url = window.URL.createObjectURL(res);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a.remove(); // remove the element
}, error => {
console.log('download error:', JSON.stringify(error));
}, () => {
console.log('Completed file download.')
});
}
значение этого.downloadUrl был установлен ранее, чтобы указать на api. Я использую это для загрузки вложений, поэтому я знаю id, contentType и filename: Я использую api MVC для возврата файла:
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public FileContentResult GetAttachment(Int32 attachmentID)
{
Attachment AT = filerep.GetAttachment(attachmentID);
if (AT != null)
{
return new FileContentResult(AT.FileBytes, AT.ContentType);
}
else
{
return null;
}
}
класс вложений выглядит вот так:
public class Attachment
{
public Int32 AttachmentID { get; set; }
public string FileName { get; set; }
public byte[] FileBytes { get; set; }
public string ContentType { get; set; }
}
репозиторий filerep возвращает файл из базы данных.
надеюсь, это поможет кому-то:)
Привет, я получил решение для загрузки с angular 2 без повреждения .... использование spring mvc и angular 2
1st-мой тип возврата: -ResponseEntity от конца java....здесь я отправляю массив byte[] имеет тип возврата от контроллера.
2nd-включить filesaver в рабочее пространство-на странице индекса как: -
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
3rd-в компоненте ts напишите этот код: -
import {ResponseContentType} from '@angular.core';
let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
this.http
.post('/project/test/export',
somevalue,options)
.subscribe(data => {
var mediaType = 'application/vnd.ms-excel';
let blob: Blob = data.blob();
window['saveAs'](blob, 'sample.xls');
});
это даст вам формат файла xls...если вы хотите другие форматы, пожалуйста, измените mediatype и имя файла с правильным расширением...спасибо, надеюсь, это поможет....
вот что я сделал в моем случае -
// service method
downloadFiles(vendorName, fileName) {
return this.http.get(this.appconstants.filesDownloadUrl, { params: { vendorName: vendorName, fileName: fileName }, responseType: 'arraybuffer' }).map((res: ArrayBuffer) => { return res; })
.catch((error: any) => _throw('Server error: ' + error));
}
// a controller function which actually downloads the file
saveData(data, fileName) {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
let blob = new Blob([data], { type: "octet/stream" }),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
// a controller function to be called on requesting a download
downloadFiles() {
this.service.downloadFiles(this.vendorName, this.fileName).subscribe(data => this.saveData(data, this.fileName), error => console.log("Error downloading the file."),
() => console.info("OK"));
}
на решение ссылаются из - здесь
let headers = new Headers({
'Content-Type': 'application/json',
'MyApp-Application': 'AppName',
'Accept': 'application/vnd.ms-excel'
});
let options = new RequestOptions({
headers: headers,
responseType: ResponseContentType.Blob
});
this.http.post(this.urlName + '/services/exportNewUpc', localStorageValue, options)
.subscribe(data => {
if (navigator.appVersion.toString().indexOf('.NET') > 0)
window.navigator.msSaveBlob(data.blob(), "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+".xlsx");
else {
var a = document.createElement("a");
a.href = URL.createObjectURL(data.blob());
a.download = "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+ ".xlsx";
a.click();
}
this.ui_loader = false;
this.selectedexport = 0;
}, error => {
console.log(error.json());
this.ui_loader = false;
document.getElementById("exceptionerror").click();
});
это будет лучше, если вы попытаетесь вызвать метод внутри subscribe
this._reportService.getReport()
.subscribe((data: any) => {
this.downloadFile(data);
},
(error: any) => onsole.log(error),
() => console.log('Complete')
);
внутри downloadFile(data)
функция нам нужно сделать block, link, href and file name
downloadFile(data: any, type: number, name: string) {
const blob = new Blob([data], {type: 'text/csv'});
const dataURL = window.URL.createObjectURL(blob);
// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob);
return;
}
const link = document.createElement('a');
link.href = dataURL;
link.download = 'export file.csv';
link.click();
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(dataURL);
}, 100);
}
}
обновление ответа Гектора с помощью File-saver и HttpClient для шага 2:
public downloadFile(file: File): Observable<Blob> {
return this.http.get(file.fullPath, {responseType: 'blob'})
}