Angular 4 download xls [duplicate] - php

Question

This question already has answers here:
How to download excel/Zip files in Angular 4
(2 answers)
Closed 5 years ago.
i'm trying to download excel file (.xls) using angular and php for backend
my backend already send my excel file as response, and when i check it, it return with correct format
but my angular 4 is returning the file as corrupted format (it contain some symbols like ��ࡱ�;�� )
below is my angular code:
Service
private headers = new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
});
downloadTemplate() {
this.options = new RequestOptions();
this.options.headers = this.headers;
const params: URLSearchParams = new URLSearchParams();
params.set('token', this.currentUser.token);
this.options.search = params;
return this.http.get(environment.api_host + '/template', this.options);
}
Component
template() {
this._apiService.downloadTemplate().subscribe((response) => {
const blob = new Blob([(<any>response)._body], {type: 'application/vnd.ms-excel'});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'template.xls';
document.body.appendChild(link);
link.click();
});
}
from my code, is there something that i miss?

Answer 1

If subscription is not necessary then just use this in downloadTemplate() method in your service
window.location.href = your_URL;

Answer 2

I'm using FileSaver library for serving files from Angular apps: http://alferov.github.io/angular-file-saver/
Here you have sample code:
getTemplate(): Observable<Blob> {
this.apiService.http()
.get(environment.api_host + '/template', { responseType: ResponseContentType.Blob })
.map(r => r.blob())
.subscribe(
template => {
FileSaver.saveAs(new Blob([template]), "template.xml");
},
error => {
console.error(error);
}
);
}
Important is that you should add header Content-Type: application/octet-stream to your PHP response. Complete and working set of headers:
$file = fopen("/tmp/examplefile.xls", "r");
array(
'Content-Disposition' => 'attachment; filename="' . basename($filePath) . '"',
'Content-Type' => 'application/octet-stream',
'Content-Length' => filesize($filePath),
'Expires' => '#0',
'Cache-Control' => 'must-revalidate',
'Pragma' => 'public'
);
I think the problem in your code is header definition: const blob = new Blob([(<any>response)._body], {type: 'application/vnd.ms-excel'}); or response type in http client options. You should send 'octet/stream' from PHP(binary data). In angular create Blob object from this data and return Blob object to user. That's all.