Download JSON array to file

Question

What is the recommended way for the following:

An array of entities should be downloaded over a button. The button is called Download transactions and should do exactly that without forcing the user to "right click and 'save site as...'".

I have an entity Transaction and an array containing it.

Entity:

export class Transaction {
  title: string;
  category: string;
  period: string;
  value: string;
}

This was the last try I did to download this array as a file:

  exportJson(): void {
    console.log(this.transactions)
    const c = JSON.stringify(this.transactions);
    const file = new Blob([c], {type: 'text/json'});
    const fileURL = URL.createObjectURL(file);
    location.href = fileURL;
  }

This loads the tab containing the result in the current window, but as plain text and not as downloadable file.

I know that there are a LOT of questions about this topic, none I found worked for me. Any help is appreciated! :)

Isn't it a server configuration that should make the resource downloadable rather than displayable? — crash, Jun 24 '17 at 13:14
@crash In my case a make a pure ui application. But how would that work? I mean, the array of transactions is already here, no need to fetch it from a server, or did I miss something here? (I'm a greenhorn in case of frontends) — codepleb, Jun 24 '17 at 13:21
hi have you tried to se it as const file = new Blob([c], {type: 'application/json'});? — federico scamuzzi, Jun 24 '17 at 13:27
another way i think is to set the header of the reqiest as excel or csv file — federico scamuzzi, Jun 24 '17 at 13:28
https://stackoverflow.com/questions/40966096/angular-2-download-csv-file-click-event-with-authentication — federico scamuzzi, Jun 24 '17 at 13:29
maybe this can help too? https://stackoverflow.com/a/18674757/2702370 — crash, Jun 24 '17 at 13:51

score 4 · Accepted Answer · answered Jun 24 '17 at 13:44

4

the following function might be what you are looking for:

function download(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(blob, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

and then

exportJson(): void {
    console.log(this.transactions)
    const c = JSON.stringify(this.transactions);
    const file = new Blob([c], {type: 'text/json'});
    download(file,"fileName.json");
  }

answered Jun 24 '17 at 13:44

Yuval Perelman

4,499
1
22
32

I saw a similar approach somewhere, but why do I need to insert a second "button to click"? I will test this, but is this really how we are supposed to provide such functionality? – codepleb Jun 24 '17 at 14:05
A web browser was not designed to save files which are not downloaded from a remote server and were explicitly approved by the end user, and if you think of it it's a potential security threat that such a thing is possible. That's just a simple workaround. – Yuval Perelman Jun 24 '17 at 14:58
Ok it works (I wonder how often I'm gonna say that in this new world :D). Thank you friend, this bothered me for way too long. – codepleb Jun 25 '17 at 07:40

Download JSON array to file

1 Answers1