Is there a way to save and API stream as .csv without using FileSaver or createObjectURL()

Question

These seem to be the only two existing approaches.

the issue with createObjectURL() is that it is deprecated, my current browser, chrome can't even call this method anymore.

the issue with FileSaver is that it feels overkill to add a whole library to your project when realistically it should only take a few lines to do it natively in angular.

here's were I'm at :

const params = {'params' : p}; const httpOptions = this.authenticationService.getRequestOptions(); httpOptions['responseType'] = 'text/csv'; this.http.post( this.url + this.currentId, params, httpOptions ).subscribe((response: any) => { console.log(response); const blob = new Blob([response], {type: 'text/csv'}); const link = document.createElement('a'); link.setAttribute('style', 'display: none'); link.href = response; // should be a URI but document.URL.createObjectURL() is deprecated const date = new Date(); link.download = 'file.csv'; link.click(); link.remove(); }, error => { console.log('I failed :(', error); });

this does indeed trigger the download of a file. but I need the blob converted to URI and I don't have that part.

EDIT :

Just for clarity :

As of TODAY 19/11/2019 and since 1/11/2017, window.URL.createObjectURL is deprecated and will return an error : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

UPDATE :

I found this :

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

https://code-examples.net/en/docs/dom/htmlmediaelement/srcobject

Deprecation of createObjectURL and replace with the new HTMLMediaElement.srcObject doesn't work for Webcam stream

it's supposed to be the replacement for createObjectURL but it only works for video elements

tatsu · Accepted Answer · 2019-11-19 14:25:21Z

I found the solution through a bit of digging and trial and error. I think this will come as a pleasant surprise that it can be this easy to download a file and that post createObjectURL()'s deprecation, it is still possible :

this.http.post( this.url + this.currentId, params, httpOptions ).subscribe((response: any) => { const link = document.createElement('a'); link.setAttribute('style', 'display: none'); link.href = 'data:attachment/csv,' + encodeURI(response); // <- it was as simple as this. const date = new Date(); link.download = this.currentChoice + '-' + date.getDate() + '-' + (1 + date.getMonth()) + '-' + date.getFullYear() + '.csv'; link.click(); link.remove(); }, error => { console.log('File download failed : ', error); });

my api's return already being the raw content of the file I do not need to call .text() or any other child.

hope this helps :)

You can also use base64 instead of encodeURI, 'data:attachment/csv;base64, '+btoa(response), I would also like to note that this is not a stream under any meaning of the word, your using AJAX to download a Plain text CSV, then attaching the data to a link.
@MartinBarker ok fair enough. I don't think I called it a stream.

Collectives™ on Stack Overflow

Is there a way to save and API stream as .csv without using FileSaver or createObjectURL()

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related