Mixing
Save csv file from HttpClient post response
I have a website where a user can request some data as a csv-file. The data is then returned as and should be downloaded/saved to a file.
I am sending a post request and subscribing, but it seems to be failing in the catch method every time.
The request header, removed authorization and such:
POST /api/@£$ HTTP/1.1
Connection: keep-alive
Content-Length: 144
Accept: application/json, text/plain, */*
Origin: https://@£$
Authorization: @£$
Content-Type: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;
with a body containing parameters, so the response is correct.
The response:
HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: text/csv
Content-Encoding: gzip
Vary: Origin,Accept-Encoding
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin:
Request-Context:
Content-Disposition: attachment; filename=export_20181120_103716.csv
X-Powered-By: ASP.NET
Set-Cookie:
Date: Tue, 20 Nov 2018 10:37:16 GMT
Am I missing something vital? Do I need to set the response type? this api will only return csv-file data so don't really need to check the file type.
EDIT:
Adding the code sending the request.
dataExport(parameters) {
const send = {
'id': parameters.ids,
'from': parameters.from,
'to': parameters.to
};
this.adalService.post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json'}) })
.do(() => { this.success('success'); })
.catch((error) => {
this.error(error);
return Observable.of(null);
})
.subscribe(r => {
const blob = new Blob([r], {type: 'text/csv'});
const url = window.URL.createObjectURL(blob);
window.open(url);
});
}
EDIT: added
responseType: 'text'to the post-request. This does not trigger the catch due to wrong reponse format. Is this the correct type? typescript did not let me use text/csv or application/csv. And im worried that when the file gets realy big, a blob will not have enough room to save the data.
angular csv angular-httpclient
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
add a comment |
I have a website where a user can request some data as a csv-file. The data is then returned as and should be downloaded/saved to a file.
I am sending a post request and subscribing, but it seems to be failing in the catch method every time.
The request header, removed authorization and such:
POST /api/@£$ HTTP/1.1
Connection: keep-alive
Content-Length: 144
Accept: application/json, text/plain, */*
Origin: https://@£$
Authorization: @£$
Content-Type: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;
with a body containing parameters, so the response is correct.
The response:
HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: text/csv
Content-Encoding: gzip
Vary: Origin,Accept-Encoding
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin:
Request-Context:
Content-Disposition: attachment; filename=export_20181120_103716.csv
X-Powered-By: ASP.NET
Set-Cookie:
Date: Tue, 20 Nov 2018 10:37:16 GMT
Am I missing something vital? Do I need to set the response type? this api will only return csv-file data so don't really need to check the file type.
EDIT:
Adding the code sending the request.
dataExport(parameters) {
const send = {
'id': parameters.ids,
'from': parameters.from,
'to': parameters.to
};
this.adalService.post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json'}) })
.do(() => { this.success('success'); })
.catch((error) => {
this.error(error);
return Observable.of(null);
})
.subscribe(r => {
const blob = new Blob([r], {type: 'text/csv'});
const url = window.URL.createObjectURL(blob);
window.open(url);
});
}
EDIT: added
responseType: 'text'to the post-request. This does not trigger the catch due to wrong reponse format. Is this the correct type? typescript did not let me use text/csv or application/csv. And im worried that when the file gets realy big, a blob will not have enough room to save the data.
angular csv angular-httpclient
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
1
We're going to need a bit more than that. 200 answers means everything went well, but we can't see if you provided a body or what your request is. Please post more !
– trichetriche
Nov 20 '18 at 10:59
@trichetriche, sorry was a bit pressed for time. Added the code that sends the request.
– Alexolo
Nov 20 '18 at 11:26
add a comment |
I have a website where a user can request some data as a csv-file. The data is then returned as and should be downloaded/saved to a file.
I am sending a post request and subscribing, but it seems to be failing in the catch method every time.
The request header, removed authorization and such:
POST /api/@£$ HTTP/1.1
Connection: keep-alive
Content-Length: 144
Accept: application/json, text/plain, */*
Origin: https://@£$
Authorization: @£$
Content-Type: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;
with a body containing parameters, so the response is correct.
The response:
HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: text/csv
Content-Encoding: gzip
Vary: Origin,Accept-Encoding
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin:
Request-Context:
Content-Disposition: attachment; filename=export_20181120_103716.csv
X-Powered-By: ASP.NET
Set-Cookie:
Date: Tue, 20 Nov 2018 10:37:16 GMT
Am I missing something vital? Do I need to set the response type? this api will only return csv-file data so don't really need to check the file type.
EDIT:
Adding the code sending the request.
dataExport(parameters) {
const send = {
'id': parameters.ids,
'from': parameters.from,
'to': parameters.to
};
this.adalService.post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json'}) })
.do(() => { this.success('success'); })
.catch((error) => {
this.error(error);
return Observable.of(null);
})
.subscribe(r => {
const blob = new Blob([r], {type: 'text/csv'});
const url = window.URL.createObjectURL(blob);
window.open(url);
});
}
EDIT: added
responseType: 'text'to the post-request. This does not trigger the catch due to wrong reponse format. Is this the correct type? typescript did not let me use text/csv or application/csv. And im worried that when the file gets realy big, a blob will not have enough room to save the data.
angular csv angular-httpclient
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
I have a website where a user can request some data as a csv-file. The data is then returned as and should be downloaded/saved to a file.
I am sending a post request and subscribing, but it seems to be failing in the catch method every time.
The request header, removed authorization and such:
POST /api/@£$ HTTP/1.1
Connection: keep-alive
Content-Length: 144
Accept: application/json, text/plain, */*
Origin: https://@£$
Authorization: @£$
Content-Type: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;
with a body containing parameters, so the response is correct.
The response:
HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: text/csv
Content-Encoding: gzip
Vary: Origin,Accept-Encoding
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin:
Request-Context:
Content-Disposition: attachment; filename=export_20181120_103716.csv
X-Powered-By: ASP.NET
Set-Cookie:
Date: Tue, 20 Nov 2018 10:37:16 GMT
Am I missing something vital? Do I need to set the response type? this api will only return csv-file data so don't really need to check the file type.
EDIT:
Adding the code sending the request.
dataExport(parameters) {
const send = {
'id': parameters.ids,
'from': parameters.from,
'to': parameters.to
};
this.adalService.post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json'}) })
.do(() => { this.success('success'); })
.catch((error) => {
this.error(error);
return Observable.of(null);
})
.subscribe(r => {
const blob = new Blob([r], {type: 'text/csv'});
const url = window.URL.createObjectURL(blob);
window.open(url);
});
}
EDIT: added
responseType: 'text'to the post-request. This does not trigger the catch due to wrong reponse format. Is this the correct type? typescript did not let me use text/csv or application/csv. And im worried that when the file gets realy big, a blob will not have enough room to save the data.
angular csv angular-httpclient
angular csv angular-httpclient
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
edited Nov 21 '18 at 7:31
Alexolo
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
asked Nov 20 '18 at 10:58
AlexoloAlexolo
55
55
1
We're going to need a bit more than that. 200 answers means everything went well, but we can't see if you provided a body or what your request is. Please post more !
– trichetriche
Nov 20 '18 at 10:59
@trichetriche, sorry was a bit pressed for time. Added the code that sends the request.
– Alexolo
Nov 20 '18 at 11:26
add a comment |
1
We're going to need a bit more than that. 200 answers means everything went well, but we can't see if you provided a body or what your request is. Please post more !
– trichetriche
Nov 20 '18 at 10:59
@trichetriche, sorry was a bit pressed for time. Added the code that sends the request.
– Alexolo
Nov 20 '18 at 11:26
1
1
We're going to need a bit more than that. 200 answers means everything went well, but we can't see if you provided a body or what your request is. Please post more !
– trichetriche
Nov 20 '18 at 10:59
We're going to need a bit more than that. 200 answers means everything went well, but we can't see if you provided a body or what your request is. Please post more !
– trichetriche
Nov 20 '18 at 10:59
@trichetriche, sorry was a bit pressed for time. Added the code that sends the request.
– Alexolo
Nov 20 '18 at 11:26
@trichetriche, sorry was a bit pressed for time. Added the code that sends the request.
– Alexolo
Nov 20 '18 at 11:26
add a comment |
1 Answer
1
active
oldest
votes
Managed to solve my issue using the responseType header, as well as using the file-saver npm package. This solution is viable at the moment, but since this is user selected data, the filesize might become massive...
...post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': contentType }), observe: 'response', responseType: 'text'})
.subscribe(r => { saveAs(new Blob([r.body], { type: 'text/csv' }), 'download.csv')});
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391502%2fsave-csv-file-from-httpclient-post-response%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Managed to solve my issue using the responseType header, as well as using the file-saver npm package. This solution is viable at the moment, but since this is user selected data, the filesize might become massive...
...post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': contentType }), observe: 'response', responseType: 'text'})
.subscribe(r => { saveAs(new Blob([r.body], { type: 'text/csv' }), 'download.csv')});
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
add a comment |
Managed to solve my issue using the responseType header, as well as using the file-saver npm package. This solution is viable at the moment, but since this is user selected data, the filesize might become massive...
...post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': contentType }), observe: 'response', responseType: 'text'})
.subscribe(r => { saveAs(new Blob([r.body], { type: 'text/csv' }), 'download.csv')});
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
add a comment |
Managed to solve my issue using the responseType header, as well as using the file-saver npm package. This solution is viable at the moment, but since this is user selected data, the filesize might become massive...
...post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': contentType }), observe: 'response', responseType: 'text'})
.subscribe(r => { saveAs(new Blob([r.body], { type: 'text/csv' }), 'download.csv')});
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
Managed to solve my issue using the responseType header, as well as using the file-saver npm package. This solution is viable at the moment, but since this is user selected data, the filesize might become massive...
...post(url, send,
{ headers: new HttpHeaders({ 'Authorization': `Bearer ${token}`, 'Content-Type': contentType }), observe: 'response', responseType: 'text'})
.subscribe(r => { saveAs(new Blob([r.body], { type: 'text/csv' }), 'download.csv')});
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
answered Nov 21 '18 at 7:34
AlexoloAlexolo
55
55
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391502%2fsave-csv-file-from-httpclient-post-response%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
We're going to need a bit more than that. 200 answers means everything went well, but we can't see if you provided a body or what your request is. Please post more !
– trichetriche
Nov 20 '18 at 10:59
@trichetriche, sorry was a bit pressed for time. Added the code that sends the request.
– Alexolo
Nov 20 '18 at 11:26