Reputation: 92
I need to get an excel file (xlsx) from the server through Angulars $http or something else.
The problem is that the file behind a REST like service which requires custom headers to perform authentication.
If the file was not behind Auth custom headers i could have used window.open() which was tested and worked fine, but the file is supposed to be secured so it was moved behind Auth service.
I can use angular to get the response from the server and write it to file as blob but the content is unreadable.
Does anyone have an idea how to achieve this?
Upvotes: 0
Views: 982
Reputation: 713
For anyone interested:
Building on George87's answer, I was able to find a solution based on the angular $http
service rather than the XMLHttpRequest
API. The advantage of $http
is that it supports promises.
The below TypeScript code should work. Just make sure to inject the $http
service, as well as the fileSaverService
into your angular Controller. The config
parameter can be used to set, for instance, an 'Authorization'
header for the request.
private downloadExcelFile = (url: string, fileName: string) => {
const config: angular.IRequestShortcutConfig = {
headers: {
Authorization: auth,
},
responseType: 'blob',
};
this.$http.get(`${url}?name=${fileName}`, config)
.then((response) => {
this.fileSaverService.saveAs(response.data, '<localFileName>.xlsx');
});
}
Upvotes: 1
Reputation: 92
I have found the answer to my question, i used XMLHttpRequest.
Sample code for others:
var xhr = new XMLHttpRequest();
xhr.open("GET", "test.xlsx");
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status === 200) {
xhr.response.type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
saveAs(xhr.response, "test.xlsx")
}
};
xhr.send();
Save as is a method from here: https://github.com/eligrey/FileSaver.js
Upvotes: 0