How to create and download a CSVfile in AngularJS using FileSaver.js
0
I'm trying to create a csv file and download it using FileSaver.js but I'm having issues doing it.
Here's code so far for the AngularJS controller:
$scope.Export = function () {
var blob = new Blob([$scope.Data], {
type: "text/csv;charset=utf-8"
});
saveAs(blob, "users.csv");
};
and the $scope.Data has this form:
But I end up having a csv with
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I don't want to construct the csv by traversing the array, or create an html table to then call its innerHTML function.
So, How can I do this?
javascript angularjs json filesaver.js
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
add a comment |
0
I'm trying to create a csv file and download it using FileSaver.js but I'm having issues doing it.
Here's code so far for the AngularJS controller:
$scope.Export = function () {
var blob = new Blob([$scope.Data], {
type: "text/csv;charset=utf-8"
});
saveAs(blob, "users.csv");
};
and the $scope.Data has this form:
But I end up having a csv with
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I don't want to construct the csv by traversing the array, or create an html table to then call its innerHTML function.
So, How can I do this?
javascript angularjs json filesaver.js
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
why dont you want to traverse an array ? Its simple and easy. Let me know how you want to download then ? I can provide you an answer of array
– Shashank Vivek
Nov 24 '18 at 12:53
The problem is, I "think" traversing an array for this is not the best way, among other things because that script would depend on that specific file, but of course, I could be terribly wrong.
– Overlord
Nov 24 '18 at 13:53
Take a look at my answer. I have tested this code for json data of size 10,000 and it worked like a charm .
– Shashank Vivek
Nov 25 '18 at 13:25
add a comment |
0
0
0
I'm trying to create a csv file and download it using FileSaver.js but I'm having issues doing it.
Here's code so far for the AngularJS controller:
$scope.Export = function () {
var blob = new Blob([$scope.Data], {
type: "text/csv;charset=utf-8"
});
saveAs(blob, "users.csv");
};
and the $scope.Data has this form:
But I end up having a csv with
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I don't want to construct the csv by traversing the array, or create an html table to then call its innerHTML function.
So, How can I do this?
javascript angularjs json filesaver.js
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
I'm trying to create a csv file and download it using FileSaver.js but I'm having issues doing it.
Here's code so far for the AngularJS controller:
$scope.Export = function () {
var blob = new Blob([$scope.Data], {
type: "text/csv;charset=utf-8"
});
saveAs(blob, "users.csv");
};
and the $scope.Data has this form:
But I end up having a csv with
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I don't want to construct the csv by traversing the array, or create an html table to then call its innerHTML function.
So, How can I do this?
javascript angularjs json filesaver.js
javascript angularjs json filesaver.js
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
edited Nov 24 '18 at 11:30
georgeawg
33.6k105168
33.6k105168
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
asked Nov 24 '18 at 8:31
OverlordOverlord
566511
566511
why dont you want to traverse an array ? Its simple and easy. Let me know how you want to download then ? I can provide you an answer of array
– Shashank Vivek
Nov 24 '18 at 12:53
The problem is, I "think" traversing an array for this is not the best way, among other things because that script would depend on that specific file, but of course, I could be terribly wrong.
– Overlord
Nov 24 '18 at 13:53
Take a look at my answer. I have tested this code for json data of size 10,000 and it worked like a charm .
– Shashank Vivek
Nov 25 '18 at 13:25
add a comment |
why dont you want to traverse an array ? Its simple and easy. Let me know how you want to download then ? I can provide you an answer of array
– Shashank Vivek
Nov 24 '18 at 12:53
The problem is, I "think" traversing an array for this is not the best way, among other things because that script would depend on that specific file, but of course, I could be terribly wrong.
– Overlord
Nov 24 '18 at 13:53
Take a look at my answer. I have tested this code for json data of size 10,000 and it worked like a charm .
– Shashank Vivek
Nov 25 '18 at 13:25
why dont you want to traverse an array ? Its simple and easy. Let me know how you want to download then ? I can provide you an answer of array
– Shashank Vivek
Nov 24 '18 at 12:53
why dont you want to traverse an array ? Its simple and easy. Let me know how you want to download then ? I can provide you an answer of array
– Shashank Vivek
Nov 24 '18 at 12:53
The problem is, I "think" traversing an array for this is not the best way, among other things because that script would depend on that specific file, but of course, I could be terribly wrong.
– Overlord
Nov 24 '18 at 13:53
The problem is, I "think" traversing an array for this is not the best way, among other things because that script would depend on that specific file, but of course, I could be terribly wrong.
– Overlord
Nov 24 '18 at 13:53
Take a look at my answer. I have tested this code for json data of size 10,000 and it worked like a charm .
– Shashank Vivek
Nov 25 '18 at 13:25
Take a look at my answer. I have tested this code for json data of size 10,000 and it worked like a charm .
– Shashank Vivek
Nov 25 '18 at 13:25
add a comment |
1 Answer
1
active
oldest
votes
0
Take a look at this plunkr example.
I have tried to generalize it by writing insertCommaForCSV which can insert comma for CSV. Also, you can pass a configurable header object.The main logic resides in:
function initiateDownload(data, fileName) {
const csvStr = insertCommaForCSV(data);
const blob = new Blob([csvStr], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName + '.csv');
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// feature detection
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName + '.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
Make sure you create a directive for this so that it can reused at other places as well.
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
Thank you @Shashank Vivek for your answer, but I feel more comfortable with a solution like this one. stackoverflow.com/questions/33495979/…. Just transforming the object into something Filesaver.js understand, but I can't make it work.
– Overlord
Nov 26 '18 at 23:37
@Overlord : As you wish. I try not to use third party js files unless we need it for some bigger purpose. it creates more and more external dependency :)
– Shashank Vivek
Nov 27 '18 at 4:25
- Shashank Vivek, that idea (the one I put) does not use external references, except for the Filesaver.js. This is perfect for me, except I can't make it work, I'm afraid you're missing the objective of building this script using Filesaver.js, thank you.
– Overlord
Nov 27 '18 at 6:35
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
});
}
});
draft saved
draft discarded
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%2f53456506%2fhow-to-create-and-download-a-csvfile-in-angularjs-using-filesaver-js%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
0
Take a look at this plunkr example.
I have tried to generalize it by writing insertCommaForCSV which can insert comma for CSV. Also, you can pass a configurable header object.The main logic resides in:
function initiateDownload(data, fileName) {
const csvStr = insertCommaForCSV(data);
const blob = new Blob([csvStr], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName + '.csv');
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// feature detection
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName + '.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
Make sure you create a directive for this so that it can reused at other places as well.
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
Thank you @Shashank Vivek for your answer, but I feel more comfortable with a solution like this one. stackoverflow.com/questions/33495979/…. Just transforming the object into something Filesaver.js understand, but I can't make it work.
– Overlord
Nov 26 '18 at 23:37
@Overlord : As you wish. I try not to use third party js files unless we need it for some bigger purpose. it creates more and more external dependency :)
– Shashank Vivek
Nov 27 '18 at 4:25
- Shashank Vivek, that idea (the one I put) does not use external references, except for the Filesaver.js. This is perfect for me, except I can't make it work, I'm afraid you're missing the objective of building this script using Filesaver.js, thank you.
– Overlord
Nov 27 '18 at 6:35
add a comment |
0
Take a look at this plunkr example.
I have tried to generalize it by writing insertCommaForCSV which can insert comma for CSV. Also, you can pass a configurable header object.The main logic resides in:
function initiateDownload(data, fileName) {
const csvStr = insertCommaForCSV(data);
const blob = new Blob([csvStr], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName + '.csv');
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// feature detection
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName + '.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
Make sure you create a directive for this so that it can reused at other places as well.
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
Thank you @Shashank Vivek for your answer, but I feel more comfortable with a solution like this one. stackoverflow.com/questions/33495979/…. Just transforming the object into something Filesaver.js understand, but I can't make it work.
– Overlord
Nov 26 '18 at 23:37
@Overlord : As you wish. I try not to use third party js files unless we need it for some bigger purpose. it creates more and more external dependency :)
– Shashank Vivek
Nov 27 '18 at 4:25
- Shashank Vivek, that idea (the one I put) does not use external references, except for the Filesaver.js. This is perfect for me, except I can't make it work, I'm afraid you're missing the objective of building this script using Filesaver.js, thank you.
– Overlord
Nov 27 '18 at 6:35
add a comment |
0
0
0
Take a look at this plunkr example.
I have tried to generalize it by writing insertCommaForCSV which can insert comma for CSV. Also, you can pass a configurable header object.The main logic resides in:
function initiateDownload(data, fileName) {
const csvStr = insertCommaForCSV(data);
const blob = new Blob([csvStr], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName + '.csv');
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// feature detection
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName + '.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
Make sure you create a directive for this so that it can reused at other places as well.
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
Take a look at this plunkr example.
I have tried to generalize it by writing insertCommaForCSV which can insert comma for CSV. Also, you can pass a configurable header object.The main logic resides in:
function initiateDownload(data, fileName) {
const csvStr = insertCommaForCSV(data);
const blob = new Blob([csvStr], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName + '.csv');
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// feature detection
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName + '.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
Make sure you create a directive for this so that it can reused at other places as well.
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
answered Nov 25 '18 at 13:24
Shashank VivekShashank Vivek
4,82732459
4,82732459
Thank you @Shashank Vivek for your answer, but I feel more comfortable with a solution like this one. stackoverflow.com/questions/33495979/…. Just transforming the object into something Filesaver.js understand, but I can't make it work.
– Overlord
Nov 26 '18 at 23:37
@Overlord : As you wish. I try not to use third party js files unless we need it for some bigger purpose. it creates more and more external dependency :)
– Shashank Vivek
Nov 27 '18 at 4:25
- Shashank Vivek, that idea (the one I put) does not use external references, except for the Filesaver.js. This is perfect for me, except I can't make it work, I'm afraid you're missing the objective of building this script using Filesaver.js, thank you.
– Overlord
Nov 27 '18 at 6:35
add a comment |
Thank you @Shashank Vivek for your answer, but I feel more comfortable with a solution like this one. stackoverflow.com/questions/33495979/…. Just transforming the object into something Filesaver.js understand, but I can't make it work.
– Overlord
Nov 26 '18 at 23:37
@Overlord : As you wish. I try not to use third party js files unless we need it for some bigger purpose. it creates more and more external dependency :)
– Shashank Vivek
Nov 27 '18 at 4:25
- Shashank Vivek, that idea (the one I put) does not use external references, except for the Filesaver.js. This is perfect for me, except I can't make it work, I'm afraid you're missing the objective of building this script using Filesaver.js, thank you.
– Overlord
Nov 27 '18 at 6:35
Thank you @Shashank Vivek for your answer, but I feel more comfortable with a solution like this one. stackoverflow.com/questions/33495979/…. Just transforming the object into something Filesaver.js understand, but I can't make it work.
– Overlord
Nov 26 '18 at 23:37
Thank you @Shashank Vivek for your answer, but I feel more comfortable with a solution like this one. stackoverflow.com/questions/33495979/…. Just transforming the object into something Filesaver.js understand, but I can't make it work.
– Overlord
Nov 26 '18 at 23:37
@Overlord : As you wish. I try not to use third party js files unless we need it for some bigger purpose. it creates more and more external dependency :)
– Shashank Vivek
Nov 27 '18 at 4:25
@Overlord : As you wish. I try not to use third party js files unless we need it for some bigger purpose. it creates more and more external dependency :)
– Shashank Vivek
Nov 27 '18 at 4:25
- Shashank Vivek, that idea (the one I put) does not use external references, except for the Filesaver.js. This is perfect for me, except I can't make it work, I'm afraid you're missing the objective of building this script using Filesaver.js, thank you.
– Overlord
Nov 27 '18 at 6:35
- Shashank Vivek, that idea (the one I put) does not use external references, except for the Filesaver.js. This is perfect for me, except I can't make it work, I'm afraid you're missing the objective of building this script using Filesaver.js, thank you.
– Overlord
Nov 27 '18 at 6:35
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53456506%2fhow-to-create-and-download-a-csvfile-in-angularjs-using-filesaver-js%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
why dont you want to traverse an array ? Its simple and easy. Let me know how you want to download then ? I can provide you an answer of array
– Shashank Vivek
Nov 24 '18 at 12:53
The problem is, I "think" traversing an array for this is not the best way, among other things because that script would depend on that specific file, but of course, I could be terribly wrong.
– Overlord
Nov 24 '18 at 13:53
Take a look at my answer. I have tested this code for json data of size 10,000 and it worked like a charm .
– Shashank Vivek
Nov 25 '18 at 13:25